@remyxjs/core 1.0.0-beta

package/dist/themes/variables.css

@@ -0,0 +1,3222 @@
+/* ====== Remyx Editor - Base Styles & Design System ====== */
+
+.rmx-editor {
+  /* ---- Layout Containment ---- */
+  contain: layout style;
+
+  /* ---- Color Palette ---- */
+  --rmx-bg: #ffffff;
+  --rmx-text: #1e293b;
+  --rmx-text-secondary: #64748b;
+  --rmx-border: #e2e8f0;
+  --rmx-border-subtle: #f1f5f9;
+
+  /* ---- Toolbar ---- */
+  --rmx-toolbar-bg: #ffffff;
+  --rmx-toolbar-border: #e2e8f0;
+  --rmx-toolbar-button-hover: #f1f5f9;
+  --rmx-toolbar-button-active: #e0e7ff;
+  --rmx-toolbar-icon: #64748b;
+  --rmx-toolbar-icon-active: #4f46e5;
+
+  /* ---- Accent / Primary ---- */
+  --rmx-primary: #6366f1;
+  --rmx-primary-hover: #4f46e5;
+  --rmx-primary-light: #e0e7ff;
+  --rmx-focus-ring: #6366f1;
+  --rmx-selection: #c7d2fe;
+
+  /* ---- Feedback ---- */
+  --rmx-danger: #ef4444;
+  --rmx-danger-light: rgba(239, 68, 68, 0.08);
+
+  /* ---- UI ---- */
+  --rmx-placeholder: #94a3b8;
+  --rmx-modal-bg: #ffffff;
+  --rmx-modal-overlay: rgba(15, 23, 42, 0.45);
+  --rmx-statusbar-bg: #f8fafc;
+  --rmx-statusbar-text: #94a3b8;
+
+  /* ---- Shadows ---- */
+  --rmx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
+  --rmx-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
+  --rmx-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
+  --rmx-shadow-float: 0 8px 30px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
+
+  /* ---- Typography ---- */
+  --rmx-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  --rmx-font-size: 13px;
+  --rmx-content-font-size: 16px;
+  --rmx-content-line-height: 1.7;
+
+  /* ---- Spacing & Shape ---- */
+  --rmx-radius: 8px;
+  --rmx-radius-sm: 6px;
+  --rmx-radius-inner: 6px;
+  --rmx-spacing-xs: 4px;
+  --rmx-spacing-sm: 8px;
+  --rmx-spacing-md: 12px;
+
+  /* ---- Autosave ---- */
+  --rmx-save-saved: #22c55e;
+  --rmx-save-saving: #f59e0b;
+  --rmx-save-unsaved: #94a3b8;
+  --rmx-save-error: #ef4444;
+  --rmx-recovery-bg: #fef3c7;
+  --rmx-recovery-text: #92400e;
+  --rmx-recovery-border: #fcd34d;
+
+  /* ---- Content Overrides (Item 12) ---- */
+  --rmx-pre-bg: #f8fafc;
+  --rmx-code-bg: rgba(99, 102, 241, 0.08);
+  --rmx-blockquote-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0.02));
+  --rmx-table-th-bg: #f8fafc;
+  --rmx-find-highlight-bg: #fef3c7;
+  --rmx-find-highlight-text: #92400e;
+  --rmx-find-current-bg: #f97316;
+  --rmx-find-current-text: #ffffff;
+  --rmx-link-decoration: rgba(99, 102, 241, 0.35);
+  --rmx-code-editor-bg: #ffffff;
+  --rmx-code-gutter-bg: #f8fafc;
+  --rmx-code-gutter-border: #e2e8f0;
+  --rmx-code-caret: #1e293b;
+
+  /* ---- Transitions ---- */
+  --rmx-transition-fast: 0.12s ease;
+  --rmx-transition-normal: 0.18s ease;
+
+  /* ---- Root element styles ---- */
+  font-family: var(--rmx-font-family);
+  font-size: var(--rmx-font-size);
+  color: var(--rmx-text);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  display: flex;
+  flex-direction: column;
+  background: var(--rmx-bg);
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--rmx-shadow-sm);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.rmx-editor *, .rmx-editor *::before, .rmx-editor *::after {
+  box-sizing: inherit;
+}
+
+/* ====== Skip Navigation Link ====== */
+.rmx-skip-link {
+  position: absolute;
+  left: -9999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  z-index: 100001;
+  padding: 8px 16px;
+  background: var(--rmx-primary);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 0 0 var(--rmx-radius-sm) var(--rmx-radius-sm);
+  white-space: nowrap;
+}
+
+.rmx-skip-link:focus {
+  position: absolute;
+  left: 8px;
+  top: 0;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  outline: 2px solid var(--rmx-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ====== Fullscreen ====== */
+.rmx-editor.rmx-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+
+.rmx-editor.rmx-fullscreen .rmx-editor-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.rmx-editor.rmx-fullscreen .rmx-edit-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+}
+
+.rmx-editor.rmx-fullscreen .rmx-content {
+  flex: 1;
+  min-height: 0 !important;
+  max-height: none !important;
+  height: auto !important;
+  overflow-y: auto;
+}
+
+/* ====== Menu Bar ====== */
+.rmx-menubar {
+  display: flex;
+  align-items: center;
+  background: var(--rmx-toolbar-bg);
+  border-bottom: 1px solid var(--rmx-toolbar-border);
+  padding: 0 4px;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 21;
+}
+
+.rmx-menubar-dropdown {
+  position: relative;
+}
+
+.rmx-menubar-trigger {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 10px;
+  border: none;
+  border-radius: var(--rmx-radius-inner);
+  background: transparent;
+  color: var(--rmx-text);
+  cursor: pointer;
+  font-size: var(--rmx-font-size);
+  font-family: var(--rmx-font-family);
+  line-height: 1;
+  white-space: nowrap;
+  transition: background var(--rmx-transition-fast);
+  margin: 2px 0;
+}
+
+.rmx-menubar-trigger:hover,
+.rmx-menubar-trigger.rmx-open {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+.rmx-menubar-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 2px;
+  min-width: 200px;
+  max-height: 400px;
+  overflow-y: auto;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-md);
+  z-index: 10000;
+  padding: 4px;
+  animation: rmx-fade-in 0.1s ease;
+}
+
+.rmx-menubar-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: var(--rmx-radius-inner);
+  background: transparent;
+  color: var(--rmx-text);
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--rmx-font-size);
+  font-family: var(--rmx-font-family);
+  gap: 8px;
+  transition: background var(--rmx-transition-fast);
+  line-height: 1.4;
+}
+
+.rmx-menubar-item:hover {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+.rmx-menubar-item.rmx-active {
+  color: var(--rmx-toolbar-icon-active);
+}
+
+.rmx-menubar-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--rmx-toolbar-icon);
+}
+
+.rmx-menubar-item.rmx-active .rmx-menubar-item-icon {
+  color: var(--rmx-toolbar-icon-active);
+}
+
+.rmx-menubar-item-label {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.rmx-menubar-shortcut {
+  margin-left: auto;
+  padding-left: 24px;
+  font-size: 0.85em;
+  color: var(--rmx-text-secondary);
+  white-space: nowrap;
+}
+
+.rmx-menubar-separator {
+  height: 1px;
+  background: var(--rmx-border);
+  margin: 4px 0;
+  opacity: 0.6;
+}
+
+.rmx-menubar-submenu-wrapper {
+  position: relative;
+}
+
+.rmx-menubar-submenu-trigger {
+  display: flex;
+  align-items: center;
+}
+
+.rmx-menubar-submenu-arrow {
+  margin-left: auto;
+  padding-left: 8px;
+  display: inline-flex;
+  align-items: center;
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-menubar-submenu {
+  position: absolute;
+  left: 100%;
+  top: -4px;
+  margin-left: 2px;
+}
+
+/* ====== Toolbar ====== */
+.rmx-toolbar {
+  background: var(--rmx-toolbar-bg);
+  border-bottom: 1px solid var(--rmx-toolbar-border);
+  padding: 6px 10px;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 20;
+}
+
+.rmx-toolbar-inner {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  gap: 1px;
+}
+
+/* ---- Toolbar Button ---- */
+/* Per-item scoped variables (--rmx-tb-*) override globals when set via inline style */
+.rmx-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--rmx-tb-size, 32px);
+  height: var(--rmx-tb-size, 32px);
+  padding: var(--rmx-tb-padding, 4px 6px);
+  border: var(--rmx-tb-border, 1px solid transparent);
+  border-radius: var(--rmx-tb-radius, var(--rmx-radius-inner));
+  background: var(--rmx-tb-bg, transparent);
+  color: var(--rmx-tb-color, var(--rmx-toolbar-icon));
+  opacity: var(--rmx-tb-opacity, 1);
+  cursor: pointer;
+  transition: background var(--rmx-transition-fast),
+              color var(--rmx-transition-fast),
+              border-color var(--rmx-transition-fast),
+              box-shadow var(--rmx-transition-fast);
+  font-size: var(--rmx-font-size);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.rmx-toolbar-btn:hover {
+  background: var(--rmx-tb-hover-bg, var(--rmx-toolbar-button-hover));
+  color: var(--rmx-tb-hover-color, var(--rmx-text));
+}
+
+.rmx-toolbar-btn.rmx-active {
+  background: var(--rmx-tb-active-bg, var(--rmx-toolbar-button-active));
+  color: var(--rmx-tb-active-color, var(--rmx-toolbar-icon-active));
+}
+
+/* #23 Focus-visible for toolbar buttons */
+.rmx-toolbar-btn:focus-visible {
+  outline: 2px solid var(--rmx-focus-ring, #2563eb);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+
+.rmx-toolbar-btn:disabled, .rmx-toolbar-btn.rmx-disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.rmx-toolbar-separator {
+  width: var(--rmx-tb-sep-width, 1px);
+  height: var(--rmx-tb-sep-height, 18px);
+  background: var(--rmx-tb-sep-color, var(--rmx-border));
+  margin: var(--rmx-tb-sep-margin, 0 6px);
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+/* ====== Toolbar Dropdown ====== */
+.rmx-toolbar-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+
+.rmx-toolbar-dropdown-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  min-width: auto;
+}
+
+.rmx-toolbar-dropdown-label {
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--rmx-font-size);
+}
+
+.rmx-toolbar-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  min-width: 140px;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-md);
+  z-index: 10000;
+  padding: 4px;
+  animation: rmx-fade-in 0.1s ease;
+}
+
+.rmx-toolbar-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  border-radius: var(--rmx-radius-inner);
+  background: transparent;
+  color: var(--rmx-text);
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--rmx-font-size);
+  transition: background var(--rmx-transition-fast);
+}
+
+.rmx-toolbar-dropdown-item:hover {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+.rmx-toolbar-dropdown-btn:focus-visible,
+.rmx-toolbar-dropdown-item:focus-visible {
+  outline: 2px solid var(--rmx-focus-ring, #2563eb);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+
+.rmx-toolbar-dropdown-item.rmx-active {
+  background: var(--rmx-toolbar-button-active);
+  color: var(--rmx-toolbar-icon-active);
+  font-weight: 500;
+}
+
+/* ====== Color Picker ====== */
+.rmx-toolbar-colorpicker {
+  position: relative;
+  display: inline-flex;
+}
+
+.rmx-color-palette {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-md);
+  z-index: 10000;
+  padding: 10px;
+  animation: rmx-fade-in 0.1s ease;
+}
+
+.rmx-color-grid {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 3px;
+  margin-bottom: 10px;
+}
+
+.rmx-color-swatch {
+  width: 22px;
+  height: 22px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+  transition: transform var(--rmx-transition-fast), box-shadow var(--rmx-transition-fast);
+}
+
+.rmx-color-swatch:hover {
+  transform: scale(1.15);
+  z-index: 1;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.rmx-color-swatch:focus-visible {
+  outline: 2px solid var(--rmx-focus-ring, #2563eb);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+
+.rmx-color-swatch.rmx-active {
+  outline: 2px solid var(--rmx-focus-ring);
+  outline-offset: 1px;
+}
+
+.rmx-color-custom {
+  padding-top: 8px;
+  border-top: 1px solid var(--rmx-border-subtle);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-color-custom input[type="color"] {
+  width: 28px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--rmx-border);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* ====== Edit Area ====== */
+.rmx-edit-area {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.rmx-content {
+  padding: 20px 24px;
+  outline: none;
+  font-size: var(--rmx-content-font-size);
+  line-height: var(--rmx-content-line-height);
+  color: var(--rmx-text);
+  overflow-y: auto;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Placeholder */
+.rmx-content.rmx-empty::before {
+  content: attr(data-placeholder);
+  color: var(--rmx-placeholder);
+  pointer-events: none;
+  position: absolute;
+  font-style: normal;
+  opacity: 0.7;
+}
+
+/* Drag over indicator */
+.rmx-content.rmx-drag-over {
+  background-color: rgba(99, 102, 241, 0.04);
+  outline: 2px dashed var(--rmx-primary);
+  outline-offset: -2px;
+}
+
+/* ====== Drag & Drop ====== */
+
+/* Drop indicator line — shows where content will land */
+.rmx-drop-indicator {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  height: 2px;
+  background: var(--rmx-primary);
+  border-radius: 1px;
+  pointer-events: none;
+  z-index: 50;
+  transition: top 0.08s ease;
+}
+
+.rmx-drop-indicator::before,
+.rmx-drop-indicator::after {
+  content: '';
+  position: absolute;
+  top: -3px;
+  width: 8px;
+  height: 8px;
+  background: var(--rmx-primary);
+  border-radius: 50%;
+}
+
+.rmx-drop-indicator::before {
+  left: -4px;
+}
+
+.rmx-drop-indicator::after {
+  right: -4px;
+}
+
+/* Block being dragged — dimmed source */
+.rmx-content .rmx-block-dragging {
+  opacity: 0.3;
+  transition: opacity 0.15s ease;
+}
+
+/* Ghost preview shown during drag */
+.rmx-drag-ghost {
+  background: var(--rmx-bg, #ffffff);
+  border: 1px solid var(--rmx-primary);
+  border-radius: var(--rmx-radius-sm, 6px);
+  box-shadow: var(--rmx-shadow-md);
+  padding: 8px 14px;
+  max-width: 400px;
+  max-height: 80px;
+  overflow: hidden;
+  opacity: 0.92;
+  font-size: var(--rmx-content-font-size, 16px);
+  line-height: var(--rmx-content-line-height, 1.7);
+}
+
+/* Drop zone overlay — full editor overlay for external drags */
+.rmx-drop-zone-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(99, 102, 241, 0.06);
+  border: 2px dashed var(--rmx-primary);
+  border-radius: var(--rmx-radius-sm, 6px);
+  z-index: 40;
+  pointer-events: none;
+  animation: rmx-fade-in 0.15s ease;
+}
+
+.rmx-drop-zone-icon {
+  width: 40px;
+  height: 40px;
+  color: var(--rmx-primary);
+  opacity: 0.7;
+}
+
+.rmx-drop-zone-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rmx-primary);
+  opacity: 0.8;
+}
+
+.rmx-drop-zone-hint {
+  font-size: 12px;
+  color: var(--rmx-text-secondary);
+  opacity: 0.7;
+}
+
+/* Block drag handle — grip icon on hover */
+.rmx-block-drag-handle {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 24px;
+  cursor: grab;
+  color: var(--rmx-text-secondary);
+  opacity: 0;
+  border-radius: 4px;
+  transition: opacity var(--rmx-transition-fast), background var(--rmx-transition-fast), color var(--rmx-transition-fast);
+  z-index: 30;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.rmx-block-drag-handle:hover {
+  opacity: 1 !important;
+  background: var(--rmx-toolbar-button-hover);
+  color: var(--rmx-text);
+}
+
+.rmx-block-drag-handle:active {
+  cursor: grabbing;
+  background: var(--rmx-toolbar-button-active);
+  color: var(--rmx-toolbar-icon-active);
+}
+
+/* Show handle when hovering near it */
+.rmx-block-drag-handle.rmx-visible {
+  opacity: 0.5;
+}
+
+/* ====== Content Styles ====== */
+.rmx-content p {
+  margin: 0 0 0.75em 0;
+}
+
+.rmx-content h1, .rmx-content h2, .rmx-content h3,
+.rmx-content h4, .rmx-content h5, .rmx-content h6 {
+  margin: 1.2em 0 0.5em 0;
+  font-weight: 650;
+  line-height: 1.3;
+  color: var(--rmx-text);
+  letter-spacing: -0.01em;
+}
+
+.rmx-content h1 { font-size: 2em; }
+.rmx-content h2 { font-size: 1.55em; }
+.rmx-content h3 { font-size: 1.25em; }
+.rmx-content h4 { font-size: 1.1em; }
+.rmx-content h5 { font-size: 1em; }
+.rmx-content h6 { font-size: 0.9em; color: var(--rmx-text-secondary); }
+
+.rmx-content a {
+  color: var(--rmx-primary);
+  text-decoration: underline;
+  text-decoration-color: rgba(99, 102, 241, 0.35);
+  text-underline-offset: 2px;
+  cursor: pointer;
+  transition: text-decoration-color var(--rmx-transition-fast), color var(--rmx-transition-fast);
+}
+
+.rmx-content a:hover {
+  color: var(--rmx-primary-hover);
+  text-decoration-color: var(--rmx-primary-hover);
+}
+
+.rmx-content blockquote {
+  margin: 1em 0;
+  padding: 10px 20px;
+  border-left: 3px solid var(--rmx-primary);
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0.02));
+  border-radius: 0 var(--rmx-radius-inner) var(--rmx-radius-inner) 0;
+  color: var(--rmx-text);
+}
+
+.rmx-content pre {
+  margin: 1em 0;
+  padding: 14px 18px;
+  background: #f8fafc;
+  border: 1px solid var(--rmx-border-subtle);
+  border-radius: var(--rmx-radius-inner);
+  overflow-x: auto;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+
+.rmx-content code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.875em;
+  background: rgba(99, 102, 241, 0.06);
+  padding: 2px 5px;
+  border-radius: 3px;
+}
+
+.rmx-content pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+/* ── Code Block Syntax Highlighting ── */
+.rmx-content pre[data-language] {
+  position: relative;
+}
+
+.rmx-content pre .rmx-code-lang-label {
+  position: absolute;
+  top: 6px;
+  right: 10px;
+  font-size: 0.7em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--rmx-text-secondary, #94a3b8);
+  opacity: 0.6;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ── Line Numbers ── */
+.rmx-content pre.rmx-has-line-numbers {
+  padding-left: 0;
+}
+
+.rmx-content pre .rmx-line-numbers {
+  display: inline-flex;
+  flex-direction: column;
+  text-align: right;
+  padding: 1em 0.75em 1em 1em;
+  margin-right: 1em;
+  border-right: 1px solid var(--rmx-border-subtle, #e2e8f0);
+  color: var(--rmx-text-secondary, #94a3b8);
+  opacity: 0.5;
+  user-select: none;
+  pointer-events: none;
+  min-width: 2em;
+  font-size: inherit;
+  line-height: inherit;
+  vertical-align: top;
+}
+
+.rmx-content pre .rmx-line-numbers .rmx-line-number {
+  display: block;
+}
+
+/* ── Copy-to-Clipboard Button ── */
+.rmx-content pre {
+  position: relative;
+}
+
+.rmx-content pre .rmx-code-copy-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--rmx-border-subtle, #e2e8f0);
+  border-radius: 4px;
+  background: var(--rmx-bg, #ffffff);
+  color: var(--rmx-text-secondary, #94a3b8);
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
+  z-index: 2;
+  line-height: 1;
+  padding: 0;
+}
+
+.rmx-content pre:hover .rmx-code-copy-btn {
+  opacity: 1;
+}
+
+.rmx-content pre .rmx-code-copy-btn:hover {
+  background: var(--rmx-bg-hover, #f1f5f9);
+  color: var(--rmx-text, #1e293b);
+}
+
+.rmx-content pre .rmx-code-copy-btn.rmx-code-copy-success {
+  opacity: 1;
+  color: #22c55e;
+  border-color: #22c55e;
+}
+
+/* ── Inline Code Highlighting ── */
+.rmx-content code[data-language]:not(pre code) {
+  background: rgba(99, 102, 241, 0.06);
+  padding: 2px 5px;
+  border-radius: 3px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.875em;
+}
+
+/* Programming language syntax tokens (light theme defaults) */
+.rmx-syn-comment { color: #6a737d; font-style: italic; }
+.rmx-syn-keyword { color: #d73a49; font-weight: 600; }
+.rmx-syn-string { color: #032f62; }
+.rmx-syn-number { color: #005cc5; }
+.rmx-syn-function { color: #6f42c1; }
+.rmx-syn-operator { color: #d73a49; }
+.rmx-syn-punctuation { color: #24292e; }
+.rmx-syn-builtin { color: #005cc5; }
+.rmx-syn-property { color: #005cc5; }
+.rmx-syn-regex { color: #032f62; }
+.rmx-syn-decorator { color: #e36209; }
+.rmx-syn-type { color: #22863a; }
+.rmx-syn-selector { color: #22863a; }
+.rmx-syn-atrule { color: #d73a49; }
+.rmx-syn-variable { color: #e36209; }
+.rmx-syn-tag { color: #22863a; }
+.rmx-syn-attr-name { color: #6f42c1; }
+.rmx-syn-attr-value { color: #032f62; }
+.rmx-syn-entity { color: #005cc5; }
+.rmx-syn-doctype { color: #6a737d; }
+
+.rmx-content hr {
+  border: none;
+  border-top: 1px solid var(--rmx-border);
+  margin: 1.5em 0;
+}
+
+.rmx-content ul, .rmx-content ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.rmx-content li {
+  margin: 0.3em 0;
+}
+
+/* Task List */
+.rmx-content .rmx-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.rmx-content .rmx-task-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.rmx-content .rmx-task-checkbox {
+  margin-top: 5px;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  accent-color: var(--rmx-primary);
+}
+
+/* Images */
+.rmx-content img {
+  max-width: 100%;
+  height: auto;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.rmx-content img:hover {
+  outline: 2px solid var(--rmx-primary);
+  outline-offset: 2px;
+}
+
+/* Tables */
+.rmx-content table.rmx-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  border-radius: var(--rmx-radius-inner);
+  overflow: hidden;
+}
+
+.rmx-content table.rmx-table td,
+.rmx-content table.rmx-table th {
+  border: 1px solid var(--rmx-border);
+  padding: 10px 14px;
+  min-width: 60px;
+  vertical-align: top;
+}
+
+.rmx-content table.rmx-table th {
+  background: var(--rmx-statusbar-bg);
+  font-weight: 600;
+  color: var(--rmx-text);
+  font-size: 0.92em;
+  text-transform: none;
+}
+
+.rmx-content table.rmx-table td:focus,
+.rmx-content table.rmx-table th:focus {
+  outline: 2px solid var(--rmx-primary);
+  outline-offset: -2px;
+}
+
+/* Sticky header row */
+.rmx-content table.rmx-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+/* Sortable columns */
+.rmx-content table.rmx-table th.rmx-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.rmx-content table.rmx-table th.rmx-sortable:hover {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+.rmx-content table.rmx-table th[data-sort-dir]::after {
+  margin-left: 4px;
+  font-size: 0.75em;
+  opacity: 0.7;
+}
+
+.rmx-content table.rmx-table th[data-sort-dir="asc"]::after {
+  content: "\25B2";
+}
+
+.rmx-content table.rmx-table th[data-sort-dir="desc"]::after {
+  content: "\25BC";
+}
+
+.rmx-content table.rmx-table th[data-sort-priority]::before {
+  content: attr(data-sort-priority);
+  font-size: 0.6em;
+  vertical-align: super;
+  margin-right: 2px;
+  opacity: 0.5;
+}
+
+/* Column resize handles */
+.rmx-col-resize-handle {
+  position: absolute;
+  cursor: col-resize;
+  background: transparent;
+  z-index: 3;
+  transition: background 0.15s;
+}
+
+.rmx-col-resize-handle:hover {
+  background: var(--rmx-primary);
+  opacity: 0.4;
+}
+
+.rmx-row-resize-handle {
+  position: absolute;
+  cursor: row-resize;
+  background: transparent;
+  z-index: 3;
+  transition: background 0.15s;
+}
+
+.rmx-row-resize-handle:hover {
+  background: var(--rmx-primary);
+  opacity: 0.4;
+}
+
+.rmx-table-resizing {
+  user-select: none;
+}
+
+/* Filter UI */
+.rmx-filter-btn {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 9px;
+  opacity: 0.4;
+  padding: 2px;
+  line-height: 1;
+  transition: opacity var(--rmx-transition-fast);
+}
+
+.rmx-filter-btn:hover,
+.rmx-filter-btn.rmx-filter-active {
+  opacity: 1;
+  color: var(--rmx-primary);
+}
+
+.rmx-filter-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 10;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  box-shadow: var(--rmx-shadow-md);
+  padding: 6px;
+  display: flex;
+  gap: 4px;
+  min-width: 140px;
+}
+
+.rmx-filter-input {
+  flex: 1;
+  padding: 4px 6px;
+  font-size: 12px;
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  background: var(--rmx-bg);
+  color: var(--rmx-text);
+  outline: none;
+}
+
+.rmx-filter-input:focus {
+  border-color: var(--rmx-primary);
+}
+
+.rmx-filter-clear-btn {
+  padding: 4px 8px;
+  font-size: 11px;
+  background: var(--rmx-toolbar-button-hover);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  cursor: pointer;
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-filter-clear-btn:hover {
+  color: var(--rmx-text);
+}
+
+/* Hidden rows (filtered out) */
+.rmx-row-hidden {
+  display: none;
+}
+
+/* Formula cells */
+.rmx-content table.rmx-table td[data-formula],
+.rmx-content table.rmx-table th[data-formula] {
+  background: rgba(99, 102, 241, 0.04);
+}
+
+/* Embeds */
+.rmx-content .rmx-embed-wrapper {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 */
+  margin: 1em 0;
+  background: #000;
+  border-radius: var(--rmx-radius-inner);
+  overflow: hidden;
+}
+
+.rmx-content .rmx-embed-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Find highlights */
+.rmx-content mark.rmx-find-highlight {
+  background: #fef08a;
+  padding: 1px 2px;
+  border-radius: 2px;
+}
+
+.rmx-content mark.rmx-find-current {
+  background: #f97316;
+  color: white;
+  padding: 1px 2px;
+  border-radius: 2px;
+}
+
+/* ====== Floating Toolbar ====== */
+.rmx-floating-toolbar {
+  position: absolute;
+  display: flex;
+  gap: 1px;
+  padding: 4px 6px;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-float);
+  z-index: 100;
+  animation: rmx-scale-in 0.15s ease;
+  will-change: transform;
+}
+
+/* ====== Image Resize Handles ====== */
+.rmx-image-handles .rmx-handle-border {
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--rmx-primary);
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.rmx-image-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--rmx-primary);
+  border: 2px solid white;
+  border-radius: 50%;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+.rmx-handle-nw { top: -5px; left: -5px; cursor: nw-resize; }
+.rmx-handle-ne { top: -5px; right: -5px; cursor: ne-resize; }
+.rmx-handle-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
+.rmx-handle-se { bottom: -5px; right: -5px; cursor: se-resize; }
+
+/* ====== Table Controls ====== */
+.rmx-table-controls {
+  display: flex;
+  gap: 2px;
+  z-index: 50;
+}
+
+.rmx-table-control-btn {
+  padding: 3px 8px;
+  font-size: 11px;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  cursor: pointer;
+  color: var(--rmx-text-secondary);
+  box-shadow: var(--rmx-shadow-sm);
+  transition: background var(--rmx-transition-fast), color var(--rmx-transition-fast);
+}
+
+.rmx-table-control-btn:hover {
+  background: var(--rmx-toolbar-button-hover);
+  color: var(--rmx-text);
+}
+
+.rmx-table-control-btn.rmx-danger {
+  color: var(--rmx-danger);
+}
+
+.rmx-table-control-btn.rmx-danger:hover {
+  background: var(--rmx-danger-light);
+}
+
+/* ====== Code Block Controls ====== */
+.rmx-codeblock-controls {
+  font-family: var(--rmx-font-family);
+}
+
+.rmx-codeblock-lang-btn {
+  padding: 2px 8px;
+  font-size: 11px;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  cursor: pointer;
+  color: var(--rmx-text-secondary);
+  box-shadow: var(--rmx-shadow-sm);
+  opacity: 0.7;
+  transition: opacity var(--rmx-transition-fast), background var(--rmx-transition-fast);
+}
+
+.rmx-codeblock-lang-btn:hover {
+  opacity: 1;
+  background: var(--rmx-toolbar-button-hover);
+  color: var(--rmx-text);
+}
+
+.rmx-codeblock-lang-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  width: 180px;
+  max-height: 240px;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-md);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+}
+
+.rmx-codeblock-lang-search {
+  padding: 6px 8px;
+  border: none;
+  border-bottom: 1px solid var(--rmx-border);
+  background: transparent;
+  color: var(--rmx-text);
+  font-size: 12px;
+  outline: none;
+}
+
+.rmx-codeblock-lang-search::placeholder {
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-codeblock-lang-list {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.rmx-codeblock-lang-option {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 4px 10px;
+  font-size: 12px;
+  border: none;
+  background: none;
+  color: var(--rmx-text);
+  cursor: pointer;
+}
+
+.rmx-codeblock-lang-option:hover {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+.rmx-codeblock-lang-option.rmx-active {
+  background: var(--rmx-primary);
+  color: #fff;
+}
+
+.rmx-codeblock-lang-empty {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--rmx-text-secondary);
+  text-align: center;
+}
+
+/* ====== Status Bar ====== */
+.rmx-statusbar {
+  display: flex;
+  gap: 16px;
+  padding: 6px 14px;
+  background: var(--rmx-statusbar-bg);
+  border-top: 1px solid var(--rmx-border-subtle);
+  font-size: 11.5px;
+  color: var(--rmx-statusbar-text);
+  flex-shrink: 0;
+  letter-spacing: 0.01em;
+}
+
+.rmx-statusbar-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.rmx-statusbar-sep {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--rmx-statusbar-text);
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.rmx-statusbar-top {
+  border-top: none;
+  border-bottom: 1px solid var(--rmx-border-subtle);
+}
+
+/* Word Count Popover */
+.rmx-wordcount-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 100;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: 8px;
+  padding: 8px 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  min-width: 160px;
+  font-size: 12.5px;
+}
+
+.rmx-wordcount-popover-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 12px;
+  border-radius: 4px;
+}
+
+.rmx-wordcount-popover-row:hover {
+  background: var(--rmx-hover-bg);
+}
+
+.rmx-wordcount-popover-label {
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-wordcount-popover-value {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--rmx-text);
+}
+
+/* ====== Context Menu ====== */
+.rmx-context-menu {
+  position: fixed;
+  min-width: 190px;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-lg);
+  z-index: 10000;
+  padding: 4px;
+  animation: rmx-scale-in 0.12s ease;
+  will-change: transform;
+}
+
+.rmx-context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  background: transparent;
+  color: var(--rmx-text);
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--rmx-radius-inner);
+  font-size: var(--rmx-font-size);
+  transition: background var(--rmx-transition-fast);
+}
+
+.rmx-context-menu-item:hover {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+.rmx-context-menu-separator {
+  height: 1px;
+  background: var(--rmx-border-subtle);
+  margin: 4px 0;
+}
+
+/* ====== Modal ====== */
+.rmx-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--rmx-modal-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100000;
+  animation: rmx-fade-in 0.15s ease;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.rmx-modal {
+  background: var(--rmx-modal-bg);
+  border-radius: 12px;
+  width: 90%;
+  box-shadow: var(--rmx-shadow-lg);
+  animation: rmx-slide-up 0.2s ease;
+  border: 1px solid var(--rmx-border);
+  will-change: transform;
+}
+
+.rmx-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 22px;
+  border-bottom: 1px solid var(--rmx-border-subtle);
+}
+
+.rmx-modal-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.rmx-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: var(--rmx-radius-inner);
+  background: transparent;
+  cursor: pointer;
+  color: var(--rmx-text-secondary);
+  transition: background var(--rmx-transition-fast), color var(--rmx-transition-fast);
+}
+
+.rmx-modal-close:hover {
+  background: var(--rmx-toolbar-button-hover);
+  color: var(--rmx-text);
+}
+
+.rmx-modal-close:focus-visible {
+  outline: 2px solid var(--rmx-focus-ring, #2563eb);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+
+.rmx-modal-body {
+  padding: 22px;
+}
+
+.rmx-modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.rmx-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rmx-form-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rmx-text);
+}
+
+.rmx-form-input {
+  padding: 9px 12px;
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  font-size: 14px;
+  color: var(--rmx-text);
+  background: var(--rmx-bg);
+  outline: none;
+  transition: border-color var(--rmx-transition-normal), box-shadow var(--rmx-transition-normal);
+  font-family: var(--rmx-font-family);
+}
+
+.rmx-form-input:focus {
+  border-color: var(--rmx-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
+}
+
+.rmx-form-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.rmx-form-checkbox input[type="checkbox"] {
+  accent-color: var(--rmx-primary);
+}
+
+.rmx-form-hint {
+  font-size: 12px;
+  color: var(--rmx-text-secondary);
+  margin: 0;
+}
+
+.rmx-modal-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding-top: 10px;
+}
+
+.rmx-modal-actions-right {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+/* ====== Buttons ====== */
+.rmx-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  background: var(--rmx-bg);
+  color: var(--rmx-text);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--rmx-font-family);
+  transition: background var(--rmx-transition-fast), border-color var(--rmx-transition-fast), box-shadow var(--rmx-transition-fast);
+}
+
+/* #24 Focus-visible for buttons */
+.rmx-btn:focus-visible {
+  outline: 2px solid var(--rmx-focus-ring, #2563eb);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+
+.rmx-btn:hover {
+  background: var(--rmx-toolbar-button-hover);
+  border-color: var(--rmx-border);
+}
+
+.rmx-btn-primary {
+  background: var(--rmx-primary);
+  color: white;
+  border-color: var(--rmx-primary);
+}
+
+.rmx-btn-primary:hover {
+  background: var(--rmx-primary-hover);
+  border-color: var(--rmx-primary-hover);
+}
+
+.rmx-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.rmx-btn-danger {
+  color: var(--rmx-danger);
+  border-color: var(--rmx-danger);
+}
+
+.rmx-btn-danger:hover {
+  background: var(--rmx-danger-light);
+}
+
+.rmx-btn-sm {
+  padding: 5px 10px;
+  font-size: 12px;
+}
+
+.rmx-btn-upload {
+  padding: 12px 24px;
+}
+
+/* ====== Tabs ====== */
+.rmx-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--rmx-border-subtle);
+  margin-bottom: 18px;
+}
+
+.rmx-tab {
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  color: var(--rmx-text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  transition: color var(--rmx-transition-fast), border-color var(--rmx-transition-fast);
+}
+
+.rmx-tab.rmx-active {
+  color: var(--rmx-primary);
+  border-bottom-color: var(--rmx-primary);
+}
+
+.rmx-tab:focus-visible {
+  outline: 2px solid var(--rmx-focus-ring, #2563eb);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+
+.rmx-tab:hover {
+  color: var(--rmx-text);
+}
+
+/* ====== Upload Area ====== */
+.rmx-upload-area {
+  text-align: center;
+  padding: 28px;
+  border: 2px dashed var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  margin-bottom: 16px;
+  transition: border-color var(--rmx-transition-fast), background var(--rmx-transition-fast);
+}
+
+.rmx-upload-area:hover {
+  border-color: var(--rmx-primary);
+  background: rgba(99, 102, 241, 0.02);
+}
+
+.rmx-upload-hint {
+  font-size: 12px;
+  color: var(--rmx-text-secondary);
+  margin-top: 10px;
+}
+
+/* ====== Table Picker ====== */
+.rmx-table-picker {
+  text-align: center;
+}
+
+.rmx-table-grid {
+  display: inline-grid;
+  grid-template-rows: repeat(10, 1fr);
+  gap: 3px;
+  padding: 4px;
+}
+
+.rmx-table-grid-row {
+  display: flex;
+  gap: 3px;
+}
+
+.rmx-table-grid-cell {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--rmx-border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background var(--rmx-transition-fast), border-color var(--rmx-transition-fast);
+}
+
+.rmx-table-grid-cell.rmx-active {
+  background: var(--rmx-primary-light);
+  border-color: var(--rmx-primary);
+}
+
+.rmx-table-grid-cell:hover {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+.rmx-table-picker-info {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--rmx-text-secondary);
+}
+
+/* ====== Source Code Textarea ====== */
+.rmx-source-textarea {
+  width: 100%;
+  min-height: 300px;
+  padding: 14px;
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--rmx-text);
+  background: var(--rmx-statusbar-bg);
+  resize: vertical;
+  outline: none;
+  transition: border-color var(--rmx-transition-normal), box-shadow var(--rmx-transition-normal);
+}
+
+.rmx-source-textarea:focus {
+  border-color: var(--rmx-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
+}
+
+/* ====== Export Modal ====== */
+.rmx-export-options {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.rmx-export-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 14px 18px;
+  text-align: left;
+  width: 100%;
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  background: var(--rmx-bg);
+  color: var(--rmx-text);
+  cursor: pointer;
+  transition: background var(--rmx-transition-fast), border-color var(--rmx-transition-fast);
+}
+
+.rmx-export-btn:hover {
+  background: var(--rmx-toolbar-button-hover);
+  border-color: var(--rmx-primary);
+}
+
+.rmx-export-btn:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+
+.rmx-export-btn-label {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.rmx-export-btn-hint {
+  font-size: 12px;
+  color: var(--rmx-text-secondary);
+  margin-top: 2px;
+}
+
+/* ====== Markdown Mode ====== */
+.rmx-content.rmx-markdown-mode {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* ====== Find & Replace Panel ====== */
+.rmx-find-replace-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: 0 0 0 var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-md);
+  padding: 10px;
+  z-index: 90;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  animation: rmx-fade-in 0.12s ease;
+}
+
+.rmx-find-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.rmx-find-input {
+  width: 200px;
+  padding: 5px 8px !important;
+  font-size: 12px !important;
+}
+
+.rmx-find-count {
+  font-size: 11px;
+  color: var(--rmx-text-secondary);
+  min-width: 60px;
+  text-align: center;
+}
+
+.rmx-find-case {
+  font-size: 11px !important;
+}
+
+/* ====== Readonly Overlay ====== */
+.rmx-readonly-overlay {
+  position: absolute;
+  inset: 0;
+  cursor: not-allowed;
+  z-index: 5;
+}
+
+/* ====== Command Palette ====== */
+.rmx-command-palette-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--rmx-modal-overlay);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+  z-index: 100000;
+  animation: rmx-fade-in 0.1s ease;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.rmx-command-palette {
+  width: 90%;
+  max-width: 520px;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: 12px;
+  box-shadow: var(--rmx-shadow-lg);
+  animation: rmx-slide-up 0.15s ease;
+  overflow: hidden;
+}
+
+.rmx-command-palette-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--rmx-border-subtle);
+}
+
+.rmx-command-palette-search-icon {
+  color: var(--rmx-text-secondary);
+  flex-shrink: 0;
+  font-size: 16px;
+}
+
+.rmx-command-palette-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 15px;
+  color: var(--rmx-text);
+  font-family: var(--rmx-font-family);
+}
+
+.rmx-command-palette-input::placeholder {
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-command-palette-list {
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.rmx-command-palette-category {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--rmx-text-secondary);
+  padding: 8px 10px 4px;
+  user-select: none;
+}
+
+.rmx-command-palette-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--rmx-radius-inner);
+  cursor: pointer;
+  transition: background var(--rmx-transition-fast);
+  user-select: none;
+}
+
+.rmx-command-palette-item:hover,
+.rmx-command-palette-item.rmx-active {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+.rmx-command-palette-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--rmx-radius-inner);
+  background: var(--rmx-statusbar-bg);
+  border: 1px solid var(--rmx-border-subtle);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--rmx-text-secondary);
+  flex-shrink: 0;
+}
+
+.rmx-command-palette-item-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.rmx-command-palette-item-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rmx-text);
+}
+
+.rmx-command-palette-item-desc {
+  font-size: 11px;
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-command-palette-shortcut {
+  font-size: 11px;
+  color: var(--rmx-text-secondary);
+  background: var(--rmx-statusbar-bg);
+  border: 1px solid var(--rmx-border-subtle);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: var(--rmx-font-family);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.rmx-command-palette-empty {
+  padding: 24px 10px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-command-palette-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--rmx-border-subtle);
+  font-size: 11px;
+  color: var(--rmx-text-secondary);
+}
+
+.rmx-command-palette-hint kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 4px;
+  background: var(--rmx-statusbar-bg);
+  border: 1px solid var(--rmx-border-subtle);
+  border-radius: 3px;
+  font-size: 10px;
+  font-family: var(--rmx-font-family);
+}
+
+/* ====== Animations ====== */
+@keyframes rmx-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes rmx-slide-up {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes rmx-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+/* ====== Icon Styles ====== */
+.rmx-icon {
+  flex-shrink: 0;
+}
+
+/* ====== Floating Toolbar Touch Support ====== */
+.rmx-floating-toolbar-touch .rmx-toolbar-btn {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.rmx-floating-toolbar-grip {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 12px;
+  cursor: grab;
+  color: var(--rmx-text-secondary);
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  padding: 2px 0;
+}
+
+.rmx-floating-toolbar-grip:active {
+  cursor: grabbing;
+}
+
+/* ====== Toolbar Overflow Menu ====== */
+.rmx-toolbar-overflow-container {
+  position: relative;
+  display: inline-flex;
+}
+
+.rmx-toolbar-overflow-btn {
+  font-size: 16px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  min-width: 36px;
+}
+
+.rmx-toolbar-overflow-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1px;
+  padding: 6px;
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-float);
+  z-index: 200;
+  min-width: 200px;
+  max-width: 320px;
+  animation: rmx-scale-in 0.12s ease;
+}
+
+/* ====== Touch Drag Ghost Preview ====== */
+.rmx-drag-ghost {
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-primary);
+  border-radius: var(--rmx-radius);
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--rmx-text);
+  box-shadow: var(--rmx-shadow-float);
+  opacity: 0.9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+}
+
+/* ====== Touch Drop Indicator ====== */
+.rmx-touch-drop-indicator {
+  height: 3px;
+  background: var(--rmx-primary);
+  border-radius: 2px;
+  margin: 2px 0;
+  pointer-events: none;
+  animation: rmx-fade-in 0.1s ease;
+}
+
+/* ====== Pinch Zoom Reset Button ====== */
+.rmx-pinch-zoom-reset {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 50;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-family: var(--rmx-font-family);
+  color: var(--rmx-primary);
+  background: var(--rmx-modal-bg);
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  box-shadow: var(--rmx-shadow-float);
+  cursor: pointer;
+  transition: background var(--rmx-transition-fast);
+}
+
+.rmx-pinch-zoom-reset:hover {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+/* ====== Responsive ====== */
+@media (max-width: 600px) {
+  .rmx-toolbar-inner {
+    gap: 1px;
+  }
+
+  .rmx-toolbar-btn {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 6px;
+  }
+
+  .rmx-toolbar-dropdown-label {
+    max-width: 60px;
+  }
+
+  .rmx-content {
+    padding: 14px;
+  }
+
+  .rmx-modal {
+    width: 95%;
+  }
+
+  .rmx-find-input {
+    width: 120px;
+  }
+
+  /* Context menu items larger for touch */
+  .rmx-context-menu-item {
+    min-height: 44px;
+    padding: 10px 16px;
+    font-size: 15px;
+  }
+
+  /* Floating toolbar mobile positioning */
+  .rmx-floating-toolbar {
+    padding: 6px 8px;
+    gap: 2px;
+  }
+
+  .rmx-floating-toolbar .rmx-toolbar-btn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  /* Show the grip handle on mobile */
+  .rmx-floating-toolbar-grip {
+    display: flex;
+  }
+}
+
+/* ====== Touch-specific: Coarse pointer (touchscreens) ====== */
+@media (pointer: coarse) {
+  /* Larger toolbar buttons for touch */
+  .rmx-toolbar-btn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  /* Larger drag handle for touch */
+  .rmx-block-drag-handle,
+  .rmx-block-drag-handle-touch {
+    width: 44px;
+    height: 44px;
+    left: -44px;
+  }
+
+  .rmx-block-drag-handle svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* Always show drag handle on touch (no hover state) */
+  .rmx-block-drag-handle.rmx-visible {
+    opacity: 0.7;
+  }
+
+  /* Context menu larger items */
+  .rmx-context-menu-item {
+    min-height: 44px;
+    padding: 10px 16px;
+  }
+
+  /* Floating toolbar grip visible on touch */
+  .rmx-floating-toolbar-grip {
+    display: flex;
+  }
+}
+
+/* ====== Utility Classes ====== */
+.rmx-inline-flex-relative {
+  position: relative;
+  display: inline-flex;
+}
+
+.rmx-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.rmx-upload-filename {
+  margin-top: 4px;
+  font-weight: 500;
+}
+
+.rmx-form-error {
+  color: var(--rmx-error, #dc2626);
+}
+
+.rmx-import-preview {
+  max-height: 200px;
+  overflow: auto;
+  border: 1px solid var(--rmx-border, #e2e8f0);
+  border-radius: var(--rmx-radius-inner, 4px);
+  padding: 8px 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  background: var(--rmx-surface, #fff);
+}
+
+.rmx-radio-group {
+  display: flex;
+  gap: 8px;
+}
+
+.rmx-radio-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+/* ====== File Attachment Chip ====== */
+.rmx-attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  margin: 2px 4px;
+  background: var(--rmx-primary-light, #e0e7ff);
+  color: var(--rmx-primary, #6366f1);
+  border-radius: var(--rmx-radius-inner, 4px);
+  font-size: 13px;
+  font-family: var(--rmx-font-family);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  line-height: 1.4;
+}
+
+.rmx-attachment:hover {
+  background: var(--rmx-selection, #c7d2fe);
+  color: var(--rmx-primary-hover, #4f46e5);
+  text-decoration: none;
+}
+
+.rmx-attachment:active {
+  opacity: 0.85;
+}
+
+/* ====== Autosave — Save Status Indicator ====== */
+
+.rmx-save-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  user-select: none;
+}
+
+.rmx-save-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: background 0.2s ease;
+}
+
+.rmx-save-status--saved .rmx-save-status-dot {
+  background: var(--rmx-save-saved);
+}
+
+.rmx-save-status--saving .rmx-save-status-dot {
+  background: var(--rmx-save-saving);
+  animation: rmx-pulse 1.2s ease-in-out infinite;
+}
+
+.rmx-save-status--unsaved .rmx-save-status-dot {
+  background: var(--rmx-save-unsaved);
+}
+
+.rmx-save-status--error .rmx-save-status-dot {
+  background: var(--rmx-save-error);
+}
+
+.rmx-save-status-label {
+  font-size: 12px;
+  color: var(--rmx-statusbar-text);
+  line-height: 1;
+}
+
+@keyframes rmx-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* ====== Autosave — Recovery Banner ====== */
+
+.rmx-recovery-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--rmx-recovery-bg);
+  border-bottom: 1px solid var(--rmx-recovery-border);
+  color: var(--rmx-recovery-text);
+  font-size: 13px;
+  line-height: 1.4;
+  gap: 12px;
+}
+
+.rmx-recovery-banner-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--rmx-recovery-text);
+}
+
+.rmx-recovery-banner-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.rmx-recovery-banner-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.rmx-recovery-btn {
+  padding: 4px 12px;
+  border-radius: var(--rmx-radius-sm);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: background 0.15s ease, color 0.15s ease;
+  line-height: 1.4;
+}
+
+.rmx-recovery-btn--restore {
+  background: var(--rmx-primary);
+  color: #fff;
+}
+
+.rmx-recovery-btn--restore:hover {
+  background: var(--rmx-primary-hover);
+}
+
+.rmx-recovery-btn--dismiss {
+  background: transparent;
+  color: var(--rmx-recovery-text);
+  border: 1px solid var(--rmx-recovery-border);
+}
+
+.rmx-recovery-btn--dismiss:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* ====== Tooltip ====== */
+.rmx-tooltip-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.rmx-tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 5px 10px;
+  background: var(--rmx-text, #1e293b);
+  color: #fff;
+  font-size: 11.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: var(--rmx-radius-inner, 4px);
+  box-shadow: var(--rmx-shadow-sm);
+  z-index: 10001;
+  pointer-events: none;
+  animation: rmx-tooltip-in 0.12s ease;
+  line-height: 1.4;
+}
+
+.rmx-tooltip-arrow {
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 8px;
+  height: 4px;
+  overflow: hidden;
+}
+
+.rmx-tooltip-arrow::before {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 6px;
+  margin: 0 auto;
+  background: var(--rmx-text, #1e293b);
+  transform: rotate(45deg);
+  transform-origin: center center;
+}
+
+@keyframes rmx-tooltip-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(2px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+/* ====== Spinner ====== */
+.rmx-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--rmx-border, #e2e8f0);
+  border-top-color: var(--rmx-primary, #6366f1);
+  border-radius: 50%;
+  animation: rmx-spin 0.6s linear infinite;
+}
+
+@keyframes rmx-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ====== Focus Indicators ====== */
+.rmx-floating-toolbar .rmx-toolbar-btn:focus-visible,
+.rmx-context-menu-item:focus-visible {
+  outline: 2px solid var(--rmx-focus-ring, #6366f1);
+  outline-offset: -2px;
+  border-radius: var(--rmx-radius-inner, 4px);
+}
+
+.rmx-context-menu-item.rmx-focused {
+  background: var(--rmx-toolbar-button-hover);
+}
+
+/* ====== Unsaved Changes Indicator ====== */
+.rmx-statusbar-dirty {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--rmx-primary, #6366f1);
+  font-weight: 600;
+}
+
+.rmx-statusbar-dirty-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--rmx-primary, #6366f1);
+}
+
+/* ====== Print Stylesheet ====== */
+@media print {
+  /* Hide all chrome — only print content */
+  .rmx-toolbar,
+  .rmx-menubar,
+  .rmx-statusbar,
+  .rmx-recovery-banner,
+  .rmx-modal-overlay,
+  .rmx-command-palette,
+  .rmx-context-menu,
+  .rmx-code-copy-btn,
+  .rmx-code-lang-label,
+  .rmx-table-filter-dropdown {
+    display: none !important;
+  }
+
+  /* Remove editor chrome styling */
+  .rmx-editor {
+    border: none !important;
+    box-shadow: none !important;
+    contain: none !important;
+    max-height: none !important;
+    overflow: visible !important;
+    background: white !important;
+    color: black !important;
+  }
+
+  .rmx-content {
+    padding: 0 !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  /* Typography for print */
+  .rmx-content h1, .rmx-content h2, .rmx-content h3,
+  .rmx-content h4, .rmx-content h5, .rmx-content h6 {
+    page-break-after: avoid;
+    break-after: avoid;
+  }
+
+  .rmx-content p, .rmx-content li, .rmx-content blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+
+  .rmx-content table, .rmx-content figure, .rmx-content img,
+  .rmx-content pre {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  .rmx-content img {
+    max-width: 100% !important;
+  }
+
+  /* Print-friendly code blocks */
+  .rmx-content pre {
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+    border: 1px solid #ccc !important;
+    background: #f9f9f9 !important;
+  }
+
+  /* Print-friendly tables */
+  .rmx-content table {
+    border-collapse: collapse !important;
+  }
+
+  .rmx-content th, .rmx-content td {
+    border: 1px solid #999 !important;
+  }
+
+  /* Show link URLs in print */
+  .rmx-content a[href]::after {
+    content: ' (' attr(href) ')';
+    font-size: 0.85em;
+    color: #666;
+    font-style: italic;
+  }
+
+  /* Don't show URLs for internal/anchor links */
+  .rmx-content a[href^="#"]::after,
+  .rmx-content a[href^="javascript"]::after {
+    content: '';
+  }
+
+  /* Line numbers visible in print */
+  .rmx-content pre .rmx-line-numbers {
+    opacity: 1 !important;
+    color: #999 !important;
+  }
+}
+
+/* ====== RTL Support ====== */
+/* Logical properties for bidirectional layout */
+.rmx-content [dir="rtl"] {
+  text-align: right;
+}
+
+.rmx-content [dir="rtl"] ul,
+.rmx-content [dir="rtl"] ol {
+  padding-left: 0;
+  padding-right: 1.5em;
+}
+
+.rmx-content [dir="rtl"] blockquote {
+  border-left: none;
+  border-right: 3px solid var(--rmx-border);
+  padding-left: 0;
+  padding-right: 16px;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.rmx-content [dir="rtl"] .rmx-task-checkbox {
+  margin-left: 8px;
+  margin-right: 0;
+}
+
+/* ====== List Nesting Visual Hierarchy ====== */
+.rmx-content ul { list-style-type: disc; }
+.rmx-content ul ul { list-style-type: circle; }
+.rmx-content ul ul ul { list-style-type: square; }
+.rmx-content ul ul ul ul { list-style-type: disc; }
+.rmx-content ul ul ul ul ul { list-style-type: circle; }
+
+.rmx-content ol { list-style-type: decimal; }
+.rmx-content ol ol { list-style-type: lower-alpha; }
+.rmx-content ol ol ol { list-style-type: lower-roman; }
+.rmx-content ol ol ol ol { list-style-type: decimal; }
+.rmx-content ol ol ol ol ol { list-style-type: lower-alpha; }
+
+/* ====== Image Alt-Text Edit Overlay ====== */
+.rmx-image-alt-overlay {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
+}
+
+.rmx-image-alt-input {
+  padding: 4px 8px;
+  font-size: 12px;
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius-inner);
+  background: var(--rmx-modal-bg);
+  color: var(--rmx-text);
+  min-width: 120px;
+  max-width: 250px;
+  box-shadow: var(--rmx-shadow-sm);
+}
+
+.rmx-image-alt-input:focus {
+  outline: none;
+  border-color: var(--rmx-primary);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.rmx-image-alt-label {
+  font-size: 11px;
+  color: var(--rmx-text-secondary);
+  background: var(--rmx-modal-bg);
+  padding: 2px 6px;
+  border-radius: var(--rmx-radius-inner);
+  border: 1px solid var(--rmx-border);
+  box-shadow: var(--rmx-shadow-sm);
+  white-space: nowrap;
+}
+
+/* ====== Embed Preview ====== */
+.rmx-embed-preview {
+  margin-top: 12px;
+  border: 1px solid var(--rmx-border);
+  border-radius: var(--rmx-radius);
+  overflow: hidden;
+  background: var(--rmx-bg);
+}
+
+.rmx-embed-preview iframe {
+  width: 100%;
+  height: 200px;
+  border: none;
+}
+
+.rmx-embed-preview-placeholder {
+  padding: 24px;
+  text-align: center;
+  color: var(--rmx-text-secondary);
+  font-size: 13px;
+}
+
+/* ====== Block Editing: Collapsible Sections ====== */
+.rmx-content details.rmx-collapsible {
+  border: 1px solid var(--rmx-border, #e2e8f0);
+  border-radius: var(--rmx-radius-inner, 4px);
+  padding: 0;
+  margin: 8px 0;
+  transition: border-color var(--rmx-transition-fast, 0.15s);
+}
+
+.rmx-content details.rmx-collapsible > summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-weight: 500;
+  background: var(--rmx-statusbar-bg, #f8fafc);
+  border-radius: var(--rmx-radius-inner, 4px);
+  user-select: none;
+  list-style: none;
+}
+
+.rmx-content details.rmx-collapsible > summary::-webkit-details-marker {
+  display: none;
+}
+
+.rmx-content details.rmx-collapsible > summary::before {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid var(--rmx-text-secondary, #64748b);
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transition: transform var(--rmx-transition-fast, 0.15s);
+  flex-shrink: 0;
+}
+
+.rmx-content details.rmx-collapsible[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+.rmx-content details.rmx-collapsible > :not(summary) {
+  padding: 8px 12px;
+}
+
+.rmx-content details.rmx-collapsible:hover {
+  border-color: var(--rmx-primary, #6366f1);
+}
+
+/* ====== Block Editing: Block Groups ====== */
+.rmx-content .rmx-block-group {
+  border: 2px dashed var(--rmx-border, #e2e8f0);
+  border-radius: var(--rmx-radius, 8px);
+  padding: 8px;
+  margin: 8px 0;
+  position: relative;
+  transition: border-color var(--rmx-transition-fast, 0.15s);
+}
+
+.rmx-content .rmx-block-group:hover {
+  border-color: var(--rmx-primary, #6366f1);
+}
+
+/* ====== Block Editing: Block Selection ====== */
+.rmx-content .rmx-block-selected {
+  outline: 2px solid var(--rmx-primary, #6366f1);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ====== Block Toolbar ====== */
+.rmx-block-toolbar {
+  pointer-events: auto;
+  animation: rmx-fade-in 0.1s ease;
+}
+
+/* ====== Smooth Animations ====== */
+
+/* Modal enter/exit: scale + fade */
+@keyframes rmx-modal-enter {
+  from { opacity: 0; transform: scale(0.92); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes rmx-modal-exit {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.92); }
+}
+.rmx-modal-overlay {
+  animation: rmx-fade-in 0.2s ease;
+}
+.rmx-modal-container,
+.rmx-modal {
+  animation: rmx-modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.rmx-modal-container.rmx-modal-closing,
+.rmx-modal.rmx-modal-closing {
+  animation: rmx-modal-exit 0.15s ease forwards;
+}
+
+/* Block reorder animation */
+@keyframes rmx-block-reorder {
+  from { opacity: 0.6; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.rmx-block-reordered {
+  animation: rmx-block-reorder 0.2s ease;
+}
+
+/* Toolbar button hover/active state transitions */
+.rmx-toolbar-btn {
+  transition: background-color var(--rmx-transition-fast), color var(--rmx-transition-fast), transform 0.1s ease, box-shadow var(--rmx-transition-fast);
+}
+.rmx-toolbar-btn:hover {
+  transform: translateY(-1px);
+}
+.rmx-toolbar-btn:active {
+  transform: translateY(0) scale(0.96);
+}
+
+/* Dropdown open animation */
+@keyframes rmx-dropdown-enter {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.rmx-color-palette,
+.rmx-toolbar-dropdown-menu,
+.rmx-toolbar-overflow-menu {
+  animation: rmx-dropdown-enter 0.15s ease;
+}
+
+/* ====== Sticky Toolbar ====== */
+.rmx-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+/* ====== Empty State ====== */
+.rmx-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: var(--rmx-placeholder, #94a3b8);
+  text-align: center;
+  user-select: none;
+  animation: rmx-fade-in 0.3s ease;
+}
+.rmx-empty-state-icon {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 16px;
+  opacity: 0.4;
+}
+.rmx-empty-state-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+.rmx-empty-state-text {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+.rmx-empty-state-hint {
+  font-size: 13px;
+  margin-top: 6px;
+  opacity: 0.7;
+}
+
+/* ====== Distraction-Free Mode ====== */
+.rmx-editor.rmx-distraction-free .rmx-toolbar,
+.rmx-editor.rmx-distraction-free .rmx-statusbar,
+.rmx-editor.rmx-distraction-free .rmx-menubar {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+.rmx-editor.rmx-distraction-free:hover .rmx-toolbar,
+.rmx-editor.rmx-distraction-free:hover .rmx-statusbar,
+.rmx-editor.rmx-distraction-free:hover .rmx-menubar,
+.rmx-editor.rmx-distraction-free.rmx-df-show-chrome .rmx-toolbar,
+.rmx-editor.rmx-distraction-free.rmx-df-show-chrome .rmx-statusbar,
+.rmx-editor.rmx-distraction-free.rmx-df-show-chrome .rmx-menubar {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ====== Breadcrumb Bar ====== */
+.rmx-breadcrumb-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  font-size: 12px;
+  color: var(--rmx-text-secondary, #64748b);
+  background: var(--rmx-statusbar-bg, #f8fafc);
+  border-bottom: 1px solid var(--rmx-border-subtle, #f1f5f9);
+  overflow-x: auto;
+  white-space: nowrap;
+  min-height: 24px;
+}
+.rmx-breadcrumb-item {
+  cursor: default;
+  padding: 1px 4px;
+  border-radius: 3px;
+  transition: background-color var(--rmx-transition-fast);
+}
+.rmx-breadcrumb-item:hover {
+  background: var(--rmx-toolbar-button-hover, #f1f5f9);
+}
+.rmx-breadcrumb-separator {
+  opacity: 0.5;
+  font-size: 10px;
+}
+
+/* ====== Minimap ====== */
+.rmx-minimap {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  background: var(--rmx-statusbar-bg, #f8fafc);
+  border-left: 1px solid var(--rmx-border-subtle, #f1f5f9);
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 5;
+  opacity: 0.8;
+  transition: opacity var(--rmx-transition-fast);
+}
+.rmx-minimap:hover {
+  opacity: 1;
+}
+.rmx-minimap-content {
+  transform-origin: top left;
+  pointer-events: none;
+  font-size: 2px;
+  line-height: 1.2;
+  padding: 4px;
+  color: var(--rmx-text, #1e293b);
+  overflow: hidden;
+}
+.rmx-minimap-viewport {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: var(--rmx-primary-light, #e0e7ff);
+  opacity: 0.4;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* ====== Split View ====== */
+.rmx-editor.rmx-split-view .rmx-editor-body {
+  display: flex;
+  flex-direction: row;
+}
+.rmx-editor.rmx-split-view .rmx-edit-area {
+  flex: 1;
+  min-width: 0;
+}
+.rmx-split-preview {
+  flex: 1;
+  min-width: 0;
+  border-left: 1px solid var(--rmx-border, #e2e8f0);
+  padding: 16px;
+  overflow-y: auto;
+  font-size: var(--rmx-content-font-size, 16px);
+  line-height: var(--rmx-content-line-height, 1.7);
+  color: var(--rmx-text, #1e293b);
+  background: var(--rmx-bg, #ffffff);
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.rmx-split-preview-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--rmx-text-secondary, #64748b);
+  background: var(--rmx-statusbar-bg, #f8fafc);
+  border-bottom: 1px solid var(--rmx-border-subtle, #f1f5f9);
+}
+
+/* ====== Drag-and-Drop Toolbar Customization ====== */
+.rmx-toolbar.rmx-toolbar-customizable .rmx-toolbar-btn {
+  cursor: grab;
+}
+.rmx-toolbar.rmx-toolbar-customizable .rmx-toolbar-btn:active {
+  cursor: grabbing;
+}
+.rmx-toolbar-btn.rmx-toolbar-drag-over {
+  box-shadow: -2px 0 0 0 var(--rmx-primary, #6366f1);
+}
+.rmx-toolbar-btn.rmx-dragging {
+  opacity: 0.4;
+}
+
+/* ====== Typography Controls Dropdown ====== */
+.rmx-typography-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+.rmx-typography-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 30;
+  background: var(--rmx-modal-bg, #ffffff);
+  border: 1px solid var(--rmx-border, #e2e8f0);
+  border-radius: var(--rmx-radius-sm, 6px);
+  box-shadow: var(--rmx-shadow-md);
+  padding: 8px;
+  min-width: 200px;
+  animation: rmx-dropdown-enter 0.15s ease;
+}
+.rmx-typography-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+.rmx-typography-row label {
+  font-size: 12px;
+  color: var(--rmx-text-secondary, #64748b);
+  min-width: 90px;
+}
+.rmx-typography-row select,
+.rmx-typography-row input {
+  flex: 1;
+  padding: 3px 6px;
+  border: 1px solid var(--rmx-border, #e2e8f0);
+  border-radius: var(--rmx-radius-sm, 6px);
+  font-size: 12px;
+  background: var(--rmx-bg, #ffffff);
+  color: var(--rmx-text, #1e293b);
+}
+
+/* ====== #28 Prefers Reduced Motion ====== */
+@media (prefers-reduced-motion: reduce) {
+  .rmx-editor *,
+  .rmx-editor *::before,
+  .rmx-editor *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ====== #41 Forced Colors (Windows High Contrast) ====== */
+@media (forced-colors: active) {
+  .rmx-toolbar-btn {
+    border: 1px solid ButtonText;
+  }
+  .rmx-toolbar-btn:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+/* ====== #39 Toast Notifications ====== */
+.rmx-toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px 20px;
+  border-radius: var(--rmx-radius, 8px);
+  font-size: 13px;
+  font-family: var(--rmx-font-family);
+  font-weight: 500;
+  z-index: 100002;
+  pointer-events: none;
+  animation: rmx-toast-in 0.25s ease, rmx-toast-out 0.25s ease forwards;
+  box-shadow: var(--rmx-shadow-md);
+  white-space: nowrap;
+}
+
+.rmx-toast--info {
+  background: var(--rmx-text, #1e293b);
+  color: #fff;
+}
+
+.rmx-toast--success {
+  background: #16a34a;
+  color: #fff;
+}
+
+.rmx-toast--warning {
+  background: #f59e0b;
+  color: #1e293b;
+}
+
+@keyframes rmx-toast-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+@keyframes rmx-toast-out {
+  0%, 75% { opacity: 1; }
+  100%    { opacity: 0; }
+}
+
+/* ====== #47 Loading Spinner ====== */
+.rmx-loading-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+}
+
+.rmx-loading-spinner::after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--rmx-border, #e2e8f0);
+  border-top-color: var(--rmx-primary, #6366f1);
+  border-radius: 50%;
+  animation: rmx-spin 0.6s linear infinite;
+}
+
+@keyframes rmx-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ====== #56 Color Preset Section Classes ====== */
+.rmx-color-presets {
+  border-top: 1px solid var(--rmx-border-subtle, #f1f5f9);
+  padding: 4px 8px;
+}
+
+.rmx-color-preset-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 2px;
+}
+
+.rmx-color-preset-name {
+  font-size: 11px;
+  flex: 1;
+}
+
+.rmx-color-preset-swatches {
+  display: flex;
+  gap: 1px;
+}
+
+.rmx-color-preset-swatch {
+  width: 12px;
+  height: 12px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  cursor: pointer;
+  padding: 0;
+}
+
+.rmx-color-preset-save-btn {
+  font-size: 11px;
+  color: var(--rmx-primary, #6366f1);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 0;
+}
+
+.rmx-color-preset-save-form {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.rmx-color-preset-save-input {
+  flex: 1;
+  font-size: 11px;
+  padding: 2px 4px;
+  border: 1px solid var(--rmx-border, #e2e8f0);
+  border-radius: 3px;
+}
+
+.rmx-color-preset-save-confirm {
+  font-size: 11px;
+  padding: 2px 6px;
+  cursor: pointer;
+}
+
+/* ====== #30 Color Default Button ====== */
+.rmx-color-default-btn {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  margin-bottom: 6px;
+  background: none;
+  border: 1px solid var(--rmx-border, #e2e8f0);
+  border-radius: var(--rmx-radius-inner, 4px);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--rmx-text-secondary, #64748b);
+  text-align: center;
+  transition: background var(--rmx-transition-fast);
+}
+
+.rmx-color-default-btn:hover {
+  background: var(--rmx-toolbar-button-hover, #f1f5f9);
+}
+
+/* ====== #34 Import Replace Warning ====== */
+.rmx-replace-warning {
+  color: var(--rmx-danger, #ef4444);
+  font-size: 12px;
+  margin-top: 4px;
+  font-weight: 500;
+}
+
+/* ====== #50 Embed Loading ====== */
+.rmx-embed-loading-container {
+  position: relative;
+}
+
+.rmx-embed-loading-text {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rmx-text-secondary, #64748b);
+  font-size: 13px;
+}
+
+/* ====== #57 Image Preview ====== */
+.rmx-image-url-preview {
+  margin-top: 8px;
+  text-align: center;
+}
+
+.rmx-image-url-preview img {
+  max-width: 100%;
+  max-height: 120px;
+  border: 1px solid var(--rmx-border, #e2e8f0);
+  border-radius: var(--rmx-radius-inner, 4px);
+}
+
+.rmx-image-url-preview-error {
+  font-size: 12px;
+  color: var(--rmx-danger, #ef4444);
+}