@domternal/theme 0.2.0

package/dist/domternal-theme.expanded.css

@@ -0,0 +1,1828 @@
+@charset "UTF-8";
+.dm-editor {
+  --dm-bg: #ffffff;
+  --dm-text: #1a1a1a;
+  --dm-muted: #999999;
+  --dm-surface: #f8f9fa;
+  --dm-border-color: #e5e7eb;
+  --dm-hover: rgba(0, 0, 0, 0.04);
+  --dm-active: rgba(0, 0, 0, 0.1);
+  --dm-accent: #2563eb;
+  --dm-accent-hover: #1d4ed8;
+  --dm-accent-surface: rgba(37, 99, 235, 0.1);
+  --dm-focus-color: rgba(66, 133, 244, 0.3);
+  --dm-selection: rgba(66, 133, 244, 0.2);
+  --dm-code-surface: #f0f0f0;
+  --dm-code-color: inherit;
+  --dm-editor-bg: var(--dm-bg);
+  --dm-editor-text: var(--dm-text);
+  --dm-editor-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --dm-editor-font-size: 1rem;
+  --dm-editor-line-height: 1.6;
+  --dm-editor-padding: 1rem;
+  --dm-editor-border: 1px solid var(--dm-border-color);
+  --dm-editor-border-radius: 0.75rem;
+  --dm-editor-focus-ring: none;
+  --dm-editor-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --dm-placeholder-color: var(--dm-muted);
+  --dm-link-color: var(--dm-accent);
+  --dm-link-hover-color: var(--dm-accent-hover);
+  --dm-code-bg: var(--dm-code-surface);
+  --dm-code-text: var(--dm-code-color);
+  --dm-code-font: "SF Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
+  --dm-code-border-radius: 0.25rem;
+  --dm-code-block-bg: var(--dm-code-surface);
+  --dm-code-block-text: var(--dm-text);
+  --dm-syntax-keyword: #d73a49;
+  --dm-syntax-entity: #6f42c1;
+  --dm-syntax-constant: #005cc5;
+  --dm-syntax-string: #032f62;
+  --dm-syntax-variable: #e36209;
+  --dm-syntax-comment: #6a737d;
+  --dm-syntax-tag: #22863a;
+  --dm-syntax-addition: #22863a;
+  --dm-syntax-addition-bg: #f0fff4;
+  --dm-syntax-deletion: #b31d28;
+  --dm-syntax-deletion-bg: #ffeef0;
+  --dm-blockquote-border: 3px solid #6a6a6a;
+  --dm-blockquote-color: #6a6a6a;
+  --dm-hr-color: var(--dm-border-color);
+  --dm-table-border: 1px solid var(--dm-border-color);
+  --dm-table-header-bg: var(--dm-surface);
+  --dm-table-selected-bg: rgba(66, 133, 244, 0.15);
+  --dm-mention-bg: var(--dm-accent-surface);
+  --dm-mention-color: var(--dm-accent);
+  --dm-mention-border-radius: 0.25rem;
+  --dm-highlight-bg: #fff3cd;
+  --dm-details-border: 1px solid var(--dm-border-color);
+  --dm-details-bg: var(--dm-surface);
+  --dm-details-summary-font-weight: 600;
+}
+
+.dm-toolbar {
+  --dm-toolbar-bg: var(--dm-bg, #ffffff);
+  --dm-toolbar-border: none;
+  --dm-toolbar-padding: 0.375rem 0.5rem;
+  --dm-toolbar-gap: 0.125rem;
+  --dm-toolbar-border-radius: 0.75rem 0.75rem 0 0;
+  --dm-button-size: 2rem;
+  --dm-button-border-radius: 0.375rem;
+  --dm-button-color: var(--dm-text, #374151);
+  --dm-button-hover-bg: var(--dm-hover, rgba(0, 0, 0, 0.04));
+  --dm-button-active-bg: var(--dm-accent-surface, rgba(37, 99, 235, 0.1));
+  --dm-button-active-color: var(--dm-accent, #2563eb);
+  --dm-button-disabled-opacity: 0.35;
+  --dm-separator-color: var(--dm-border-color, #e5e7eb);
+  --dm-separator-margin: 0.375rem;
+}
+
+.dm-editor .ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0;
+  outline: none;
+}
+
+.dm-editor .ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.dm-editor .ProseMirror li {
+  position: relative;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+.ProseMirror [draggable][contenteditable=false] {
+  user-select: text;
+}
+
+.dm-editor .ProseMirror-selectednode {
+  outline: 2px solid var(--dm-accent, #2563eb);
+}
+
+.dm-editor li.ProseMirror-selectednode {
+  outline: none;
+}
+
+.dm-editor li.ProseMirror-selectednode::after {
+  content: "";
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid var(--dm-accent, #2563eb);
+  pointer-events: none;
+}
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+}
+
+.dm-editor .ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.dm-editor .ProseMirror-gapcursor::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid var(--dm-editor-text, #1a1a1a);
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+.dm-editor .ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+.dm-editor .tableWrapper {
+  overflow-x: auto;
+}
+
+.dm-editor table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
+.dm-editor td,
+.dm-editor th {
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.dm-editor .column-resize-handle {
+  position: absolute;
+  right: -1.5px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  z-index: 20;
+  background-color: var(--dm-accent, #2563eb);
+  pointer-events: none;
+}
+
+.dm-editor .dm-mouse-drag .column-resize-handle {
+  display: none;
+}
+
+.dm-editor .ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.dm-editor .ProseMirror.resize-cursor.dm-mouse-drag {
+  cursor: auto;
+}
+
+.dm-editor .selectedCell::after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--dm-table-selected-bg, rgba(66, 133, 244, 0.15));
+  pointer-events: none;
+}
+
+.dm-editor .selectedCell::selection,
+.dm-editor .selectedCell *::selection {
+  background: transparent !important;
+  color: inherit !important;
+}
+
+.dm-editor {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  background: var(--dm-editor-bg);
+  color: var(--dm-editor-text);
+  font-family: var(--dm-editor-font-family);
+  font-size: var(--dm-editor-font-size);
+  line-height: var(--dm-editor-line-height);
+  border: var(--dm-editor-border);
+  border-radius: var(--dm-editor-border-radius);
+  box-shadow: var(--dm-editor-shadow, none);
+  overflow: hidden;
+  color-scheme: var(--dm-color-scheme, light);
+}
+.dm-editor .ProseMirror {
+  padding: var(--dm-editor-padding);
+  min-height: 6rem;
+}
+.dm-editor .ProseMirror:focus {
+  outline: none;
+}
+.dm-editor:focus-within {
+  box-shadow: var(--dm-editor-focus-ring, var(--dm-editor-shadow, none));
+}
+.dm-editor .ProseMirror ::selection {
+  background: var(--dm-selection);
+}
+
+.dm-toolbar + .dm-editor {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: none;
+}
+
+@keyframes dm-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.dm-editor .ProseMirror p {
+  margin: 0.4em 0;
+}
+.dm-editor .ProseMirror p:last-child {
+  margin-bottom: 0;
+}
+.dm-editor .ProseMirror h1,
+.dm-editor .ProseMirror h2,
+.dm-editor .ProseMirror h3,
+.dm-editor .ProseMirror h4,
+.dm-editor .ProseMirror h5,
+.dm-editor .ProseMirror h6 {
+  margin: 1.5em 0 0.5em;
+  font-weight: 700;
+  line-height: 1.25;
+}
+.dm-editor .ProseMirror h1:first-child,
+.dm-editor .ProseMirror h2:first-child,
+.dm-editor .ProseMirror h3:first-child,
+.dm-editor .ProseMirror h4:first-child,
+.dm-editor .ProseMirror h5:first-child,
+.dm-editor .ProseMirror h6:first-child {
+  margin-top: 0;
+}
+.dm-editor .ProseMirror h1 {
+  font-size: 2em;
+}
+.dm-editor .ProseMirror h2 {
+  font-size: 1.5em;
+}
+.dm-editor .ProseMirror h3 {
+  font-size: 1.25em;
+}
+.dm-editor .ProseMirror h4 {
+  font-size: 1.1em;
+}
+.dm-editor .ProseMirror h5 {
+  font-size: 1em;
+}
+.dm-editor .ProseMirror h6 {
+  font-size: 0.9em;
+  color: var(--dm-muted, #666);
+}
+.dm-editor .ProseMirror code {
+  background: var(--dm-code-bg);
+  color: var(--dm-code-text);
+  font-family: var(--dm-code-font);
+  font-size: 0.875em;
+  padding: 0.15em 0.35em;
+  border: 1px solid var(--dm-border-color);
+  border-radius: var(--dm-code-border-radius);
+}
+.dm-editor .ProseMirror pre {
+  background: var(--dm-code-block-bg);
+  color: var(--dm-code-block-text);
+  font-family: var(--dm-code-font);
+  font-size: 0.875em;
+  padding: 1em;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+.dm-editor .ProseMirror pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  font-size: inherit;
+}
+.dm-editor .ProseMirror blockquote {
+  border-left: var(--dm-blockquote-border);
+  color: var(--dm-blockquote-color);
+  margin: 0.75em 0;
+  padding: 0.25em 0 0.25em 1em;
+}
+.dm-editor .ProseMirror blockquote p {
+  margin-top: 0;
+}
+.dm-editor .ProseMirror ul,
+.dm-editor .ProseMirror ol {
+  margin: 0.75em 0;
+  padding-left: 1.5em;
+}
+.dm-editor .ProseMirror ul li,
+.dm-editor .ProseMirror ol li {
+  margin: 0.25em 0;
+}
+.dm-editor .ProseMirror ul li > p,
+.dm-editor .ProseMirror ol li > p {
+  margin: 0.1em 0;
+}
+.dm-editor .ProseMirror ol {
+  list-style-type: decimal;
+}
+.dm-editor .ProseMirror ul {
+  list-style-type: disc;
+}
+.dm-editor .ProseMirror ul ul,
+.dm-editor .ProseMirror ol ul {
+  list-style-type: circle;
+}
+.dm-editor .ProseMirror ul ul ul,
+.dm-editor .ProseMirror ol ul ul,
+.dm-editor .ProseMirror ol ol ul {
+  list-style-type: square;
+}
+.dm-editor .ProseMirror hr {
+  border: none;
+  border-top: 2px solid var(--dm-hr-color);
+  margin: 1.5em 0;
+}
+.dm-editor .ProseMirror a {
+  color: var(--dm-link-color);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.dm-editor .ProseMirror a:hover {
+  color: var(--dm-link-hover-color);
+}
+.dm-editor .ProseMirror mark {
+  color: inherit;
+}
+.dm-editor .ProseMirror img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0.75em 0;
+}
+.dm-editor .ProseMirror img.ProseMirror-selectednode {
+  outline: 2px solid var(--dm-accent, #2563eb);
+}
+.dm-editor .ProseMirror table {
+  border: var(--dm-table-border);
+  margin: 0.75em 0;
+}
+.dm-editor .ProseMirror table td,
+.dm-editor .ProseMirror table th {
+  border: var(--dm-table-border);
+  padding: 0.5em 0.75em;
+  min-width: 100px;
+}
+.dm-editor .ProseMirror table th {
+  background: var(--dm-table-header-bg);
+  font-weight: 600;
+  text-align: left;
+}
+.dm-editor .ProseMirror table td > p,
+.dm-editor .ProseMirror table th > p {
+  margin: 0;
+}
+
+.dm-editor .ProseMirror pre code .hljs-doctag,
+.dm-editor .ProseMirror pre code .hljs-keyword,
+.dm-editor .ProseMirror pre code .hljs-meta .hljs-keyword,
+.dm-editor .ProseMirror pre code .hljs-template-tag,
+.dm-editor .ProseMirror pre code .hljs-template-variable,
+.dm-editor .ProseMirror pre code .hljs-type,
+.dm-editor .ProseMirror pre code .hljs-variable.language_ {
+  color: var(--dm-syntax-keyword);
+}
+.dm-editor .ProseMirror pre code .hljs-title,
+.dm-editor .ProseMirror pre code .hljs-title.class_,
+.dm-editor .ProseMirror pre code .hljs-title.class_.inherited__,
+.dm-editor .ProseMirror pre code .hljs-title.function_ {
+  color: var(--dm-syntax-entity);
+}
+.dm-editor .ProseMirror pre code .hljs-attr,
+.dm-editor .ProseMirror pre code .hljs-attribute,
+.dm-editor .ProseMirror pre code .hljs-literal,
+.dm-editor .ProseMirror pre code .hljs-meta,
+.dm-editor .ProseMirror pre code .hljs-number,
+.dm-editor .ProseMirror pre code .hljs-operator,
+.dm-editor .ProseMirror pre code .hljs-variable,
+.dm-editor .ProseMirror pre code .hljs-selector-attr,
+.dm-editor .ProseMirror pre code .hljs-selector-class,
+.dm-editor .ProseMirror pre code .hljs-selector-id {
+  color: var(--dm-syntax-constant);
+}
+.dm-editor .ProseMirror pre code .hljs-regexp,
+.dm-editor .ProseMirror pre code .hljs-string,
+.dm-editor .ProseMirror pre code .hljs-meta .hljs-string {
+  color: var(--dm-syntax-string);
+}
+.dm-editor .ProseMirror pre code .hljs-built_in,
+.dm-editor .ProseMirror pre code .hljs-symbol {
+  color: var(--dm-syntax-variable);
+}
+.dm-editor .ProseMirror pre code .hljs-comment,
+.dm-editor .ProseMirror pre code .hljs-code,
+.dm-editor .ProseMirror pre code .hljs-formula {
+  color: var(--dm-syntax-comment);
+}
+.dm-editor .ProseMirror pre code .hljs-name,
+.dm-editor .ProseMirror pre code .hljs-quote,
+.dm-editor .ProseMirror pre code .hljs-selector-tag,
+.dm-editor .ProseMirror pre code .hljs-selector-pseudo {
+  color: var(--dm-syntax-tag);
+}
+.dm-editor .ProseMirror pre code .hljs-section {
+  color: var(--dm-syntax-constant);
+  font-weight: bold;
+}
+.dm-editor .ProseMirror pre code .hljs-bullet {
+  color: var(--dm-syntax-tag);
+}
+.dm-editor .ProseMirror pre code .hljs-addition {
+  color: var(--dm-syntax-addition);
+  background-color: var(--dm-syntax-addition-bg);
+}
+.dm-editor .ProseMirror pre code .hljs-deletion {
+  color: var(--dm-syntax-deletion);
+  background-color: var(--dm-syntax-deletion-bg);
+}
+.dm-editor .ProseMirror pre code .hljs-emphasis {
+  font-style: italic;
+}
+.dm-editor .ProseMirror pre code .hljs-strong {
+  font-weight: bold;
+}
+
+.dm-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: var(--dm-toolbar-justify, flex-start);
+  gap: var(--dm-toolbar-gap);
+  padding: var(--dm-toolbar-padding);
+  background: var(--dm-toolbar-bg);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-bottom: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-toolbar-border-radius);
+  box-shadow: var(--dm-editor-shadow, none);
+}
+
+.dm-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-toolbar-gap);
+}
+
+.dm-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dm-button-size);
+  height: var(--dm-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--dm-button-border-radius);
+  background: transparent;
+  color: var(--dm-button-color);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+  font-size: 0.875rem;
+  line-height: 1;
+}
+.dm-toolbar-button:hover {
+  background: var(--dm-button-hover-bg);
+}
+.dm-toolbar-button--active {
+  background: var(--dm-button-active-bg);
+  color: var(--dm-button-active-color);
+}
+.dm-toolbar-button[aria-expanded=true] {
+  background: var(--dm-button-hover-bg);
+}
+.dm-toolbar-button--disabled, .dm-toolbar-button:disabled {
+  opacity: var(--dm-button-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.dm-toolbar-button svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.dm-toolbar-dropdown-trigger {
+  position: relative;
+  width: auto;
+  padding: 0 0.375rem;
+  gap: 0.125rem;
+}
+.dm-toolbar-dropdown-trigger[aria-expanded=true] {
+  background: var(--dm-button-hover-bg);
+}
+
+.dm-toolbar-color-indicator {
+  position: absolute;
+  bottom: 0.15rem;
+  left: 0.25rem;
+  width: 1.375rem;
+  height: 0.3rem;
+  border-radius: 2px;
+}
+
+.dm-toolbar-trigger-label {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 0.8125rem;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 2.5rem;
+}
+.dm-toolbar-trigger-label svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+[data-dropdown=fontFamily] .dm-toolbar-trigger-label {
+  width: 5rem;
+}
+
+.dm-toolbar-button .dm-dropdown-caret {
+  width: 0.625rem;
+  height: 0.625rem;
+  flex-shrink: 0;
+}
+
+.dm-toolbar-dropdown-wrapper {
+  position: relative;
+}
+
+.dm-toolbar-dropdown-panel {
+  position: absolute;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 8rem;
+  padding: 0.25rem;
+  background: var(--dm-bg, #fff);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+  animation: dm-fade-in 0.2s ease;
+}
+.dm-toolbar-dropdown-panel.dm-color-palette {
+  padding: 0.5rem;
+  border-radius: 0.75rem;
+}
+
+.dm-toolbar-dropdown-panel[data-display-mode=icon] {
+  min-width: 0;
+}
+.dm-toolbar-dropdown-panel[data-display-mode=icon] .dm-toolbar-dropdown-item {
+  width: auto;
+  padding: 0.375rem;
+  justify-content: center;
+}
+
+.dm-toolbar-dropdown-panel[data-display-mode=text] {
+  min-width: 0;
+}
+.dm-toolbar-dropdown-panel[data-display-mode=text] .dm-toolbar-dropdown-item {
+  gap: 0;
+}
+
+.dm-toolbar-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: var(--dm-button-border-radius);
+  background: transparent;
+  color: var(--dm-button-color);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  text-align: left;
+  white-space: nowrap;
+  transition: background-color 0.15s;
+}
+.dm-toolbar-dropdown-item:hover {
+  background: var(--dm-button-hover-bg);
+}
+.dm-toolbar-dropdown-item--active {
+  color: var(--dm-button-active-color);
+  background: var(--dm-button-active-bg);
+}
+.dm-toolbar-dropdown-item svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.dm-toolbar-separator {
+  width: 1px;
+  height: 1.25rem;
+  background: var(--dm-separator-color);
+  margin: 0 var(--dm-separator-margin);
+}
+
+.dm-color-palette {
+  display: grid;
+  grid-template-columns: repeat(var(--dm-palette-columns, 10), 1fr);
+  gap: 0.375rem;
+  padding: 0.375rem;
+  min-width: auto;
+  width: max-content;
+}
+
+.dm-color-palette-reset {
+  grid-column: 1/-1;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  margin-bottom: 0.375rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--dm-button-color, #1a1a1a);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  text-align: left;
+  white-space: nowrap;
+  transition: background-color 0.15s;
+}
+.dm-color-palette-reset:hover {
+  background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.06));
+}
+.dm-color-palette-reset svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.dm-color-swatch {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+.dm-color-swatch:hover {
+  transform: scale(1.15);
+  z-index: 1;
+  box-shadow: 0 0 0 2px var(--dm-toolbar-bg, #f8f9fa), 0 0 0 3px var(--dm-accent, #2563eb);
+}
+.dm-color-swatch--active {
+  box-shadow: 0 0 0 2px var(--dm-toolbar-bg, #f8f9fa), 0 0 0 3px var(--dm-accent, #2563eb);
+}
+.dm-color-swatch--active::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12 5L6.5 11 4 8.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.3'/%3E%3Cpath d='M12 5L6.5 11 4 8.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
+}
+
+.dm-theme-dark .dm-color-swatch,
+.dm-theme-auto .dm-color-swatch {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-color-swatch {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+}
+.dm-bubble-menu {
+  --dm-toolbar-padding: 0.25rem;
+  --dm-toolbar-gap: 0.125rem;
+  --dm-button-size: 1.75rem;
+  --dm-button-border-radius: 0.25rem;
+  --dm-button-color: var(--dm-text, #1a1a1a);
+  --dm-button-hover-bg: var(--dm-hover, rgba(0, 0, 0, 0.06));
+  --dm-button-active-bg: var(--dm-accent-surface, rgba(37, 99, 235, 0.1));
+  --dm-button-active-color: var(--dm-accent, #2563eb);
+  --dm-button-disabled-opacity: 0.4;
+}
+.dm-bubble-menu .dm-toolbar-button svg {
+  width: 1rem;
+  height: 1rem;
+}
+.dm-bubble-menu .dm-toolbar-separator {
+  width: 1px;
+  height: 1.125rem;
+  background: var(--dm-separator-color, var(--dm-border-color, #e0e0e0));
+  margin: 0 0.125rem;
+  flex-shrink: 0;
+}
+.dm-bubble-menu {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: var(--dm-toolbar-gap);
+  padding: var(--dm-toolbar-padding);
+  background: var(--dm-bg, #fff);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+  visibility: hidden;
+  opacity: 0;
+  z-index: 50;
+}
+.dm-bubble-menu[data-show] {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.15s ease;
+}
+
+.dm-floating-menu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-toolbar-gap);
+  padding: var(--dm-toolbar-padding);
+  background: var(--dm-toolbar-bg);
+  border: var(--dm-toolbar-border);
+  border-radius: var(--dm-button-border-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s;
+  z-index: 50;
+}
+.dm-floating-menu[data-show] {
+  visibility: visible;
+  opacity: 1;
+}
+
+.dm-link-popover {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s;
+  z-index: 60;
+}
+.dm-link-popover[data-show] {
+  visibility: visible;
+  opacity: 1;
+}
+
+.dm-link-popover-input {
+  border: 1px solid #e0e0e0;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  min-width: 14rem;
+  outline: none;
+  background: #fff;
+  color: #1a1a1a;
+}
+.dm-link-popover-input:focus {
+  border-color: #2563eb;
+}
+
+.dm-link-popover-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: #1a1a1a;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+.dm-link-popover-btn:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.dm-link-popover-btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.dm-link-popover-apply:hover {
+  color: #2563eb;
+}
+
+.dm-link-popover-remove:hover {
+  color: #dc2626;
+}
+
+.dm-link-pending {
+  background-color: rgba(37, 99, 235, 0.12);
+  border-radius: 1px;
+}
+
+[data-theme=dark] .dm-link-popover,
+.dm-theme-dark .dm-link-popover {
+  background: #2a2a2a;
+  border-color: #404040;
+}
+[data-theme=dark] .dm-link-popover .dm-link-popover-input,
+.dm-theme-dark .dm-link-popover .dm-link-popover-input {
+  background: #1a1a1a;
+  border-color: #404040;
+  color: #e0e0e0;
+}
+[data-theme=dark] .dm-link-popover .dm-link-popover-input:focus,
+.dm-theme-dark .dm-link-popover .dm-link-popover-input:focus {
+  border-color: #3b82f6;
+}
+[data-theme=dark] .dm-link-popover .dm-link-popover-btn,
+.dm-theme-dark .dm-link-popover .dm-link-popover-btn {
+  color: #e0e0e0;
+}
+[data-theme=dark] .dm-link-popover .dm-link-popover-btn:hover,
+.dm-theme-dark .dm-link-popover .dm-link-popover-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+[data-theme=dark] .dm-link-popover .dm-link-popover-apply:hover,
+.dm-theme-dark .dm-link-popover .dm-link-popover-apply:hover {
+  color: #3b82f6;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-link-popover {
+    background: #2a2a2a;
+    border-color: #404040;
+  }
+  .dm-theme-auto .dm-link-popover .dm-link-popover-input {
+    background: #1a1a1a;
+    border-color: #404040;
+    color: #e0e0e0;
+  }
+  .dm-theme-auto .dm-link-popover .dm-link-popover-input:focus {
+    border-color: #3b82f6;
+  }
+  .dm-theme-auto .dm-link-popover .dm-link-popover-btn {
+    color: #e0e0e0;
+  }
+  .dm-theme-auto .dm-link-popover .dm-link-popover-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .dm-theme-auto .dm-link-popover .dm-link-popover-apply:hover {
+    color: #3b82f6;
+  }
+}
+.dm-editor .ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--dm-placeholder-color);
+  pointer-events: none;
+  height: 0;
+}
+
+.dm-editor .ProseMirror ul[data-type=taskList] {
+  list-style: none;
+  padding-left: 0;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5em;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > label {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 0.4em;
+  user-select: none;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > label input[type=checkbox] {
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  accent-color: var(--dm-accent, #2563eb);
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > div {
+  flex: 1;
+  min-width: 0;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > div > p {
+  margin: 0;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem][data-checked=true] > div {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+.dm-editor .ProseMirror .mention {
+  display: inline;
+  background: var(--dm-mention-bg);
+  color: var(--dm-mention-color);
+  border-radius: var(--dm-mention-border-radius);
+  padding: 0.1em 0.3em;
+  font-weight: 500;
+  font-size: 0.95em;
+  white-space: nowrap;
+}
+.dm-editor .ProseMirror .mention-suggestion {
+  text-decoration: underline;
+  text-decoration-color: var(--dm-accent, #2563eb);
+  text-underline-offset: 2px;
+}
+
+.dm-editor .ProseMirror img[style*="float: left"], .dm-editor .ProseMirror img[style*="float: right"] {
+  max-width: 60%;
+}
+
+.dm-editor .ProseMirror .dm-image-resizable {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  margin: 0.75em 0;
+  line-height: 0;
+}
+.dm-editor .ProseMirror .dm-image-resizable img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.dm-editor .ProseMirror .dm-image-resizable[data-float=left] {
+  float: left;
+  margin: 0 1em 1em 0;
+}
+.dm-editor .ProseMirror .dm-image-resizable[data-float=right] {
+  float: right;
+  margin: 0 0 1em 1em;
+}
+.dm-editor .ProseMirror .dm-image-resizable[data-float=center] {
+  display: block;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+.dm-editor .ProseMirror .dm-image-resizable[data-float=left], .dm-editor .ProseMirror .dm-image-resizable[data-float=right] {
+  max-width: 60%;
+  z-index: 1;
+}
+.dm-editor .ProseMirror .dm-image-resizable.ProseMirror-selectednode {
+  outline: 2px solid var(--dm-accent, #2563eb);
+}
+.dm-editor .ProseMirror .dm-image-resizable.ProseMirror-selectednode .dm-image-handle {
+  display: block;
+}
+.dm-editor .ProseMirror .dm-image-handle {
+  display: none;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--dm-accent, #2563eb);
+  border: 1px solid #fff;
+  border-radius: 1px;
+  z-index: 5;
+}
+.dm-editor .ProseMirror .dm-image-handle-nw {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+.dm-editor .ProseMirror .dm-image-handle-ne {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+.dm-editor .ProseMirror .dm-image-handle-sw {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+.dm-editor .ProseMirror .dm-image-handle-se {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+
+.dm-image-popover {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s;
+  z-index: 60;
+}
+.dm-image-popover[data-show] {
+  visibility: visible;
+  opacity: 1;
+}
+
+.dm-image-popover-input {
+  border: 1px solid #e0e0e0;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  min-width: 14rem;
+  outline: none;
+  background: #fff;
+  color: #1a1a1a;
+}
+.dm-image-popover-input:focus {
+  border-color: #2563eb;
+}
+
+.dm-image-popover-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: #1a1a1a;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+.dm-image-popover-btn:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.dm-image-popover-btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.dm-image-popover-apply:hover {
+  color: #2563eb;
+}
+
+.dm-image-popover-browse:hover {
+  color: #2563eb;
+}
+
+[data-theme=dark] .dm-image-popover,
+.dm-theme-dark .dm-image-popover {
+  background: #2a2a2a;
+  border-color: #404040;
+}
+[data-theme=dark] .dm-image-popover .dm-image-popover-input,
+.dm-theme-dark .dm-image-popover .dm-image-popover-input {
+  background: #1a1a1a;
+  border-color: #404040;
+  color: #e0e0e0;
+}
+[data-theme=dark] .dm-image-popover .dm-image-popover-input:focus,
+.dm-theme-dark .dm-image-popover .dm-image-popover-input:focus {
+  border-color: #3b82f6;
+}
+[data-theme=dark] .dm-image-popover .dm-image-popover-btn,
+.dm-theme-dark .dm-image-popover .dm-image-popover-btn {
+  color: #e0e0e0;
+}
+[data-theme=dark] .dm-image-popover .dm-image-popover-btn:hover,
+.dm-theme-dark .dm-image-popover .dm-image-popover-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+[data-theme=dark] .dm-image-popover .dm-image-popover-apply:hover,
+.dm-theme-dark .dm-image-popover .dm-image-popover-apply:hover {
+  color: #3b82f6;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-image-popover {
+    background: #2a2a2a;
+    border-color: #404040;
+  }
+  .dm-theme-auto .dm-image-popover .dm-image-popover-input {
+    background: #1a1a1a;
+    border-color: #404040;
+    color: #e0e0e0;
+  }
+  .dm-theme-auto .dm-image-popover .dm-image-popover-input:focus {
+    border-color: #3b82f6;
+  }
+  .dm-theme-auto .dm-image-popover .dm-image-popover-btn {
+    color: #e0e0e0;
+  }
+  .dm-theme-auto .dm-image-popover .dm-image-popover-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .dm-theme-auto .dm-image-popover .dm-image-popover-apply:hover {
+    color: #3b82f6;
+  }
+}
+.dm-editor.dm-dragover {
+  outline: 2px dashed var(--dm-accent);
+  outline-offset: -2px;
+}
+.dm-editor.dm-dragover::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--dm-accent);
+  opacity: 0.05;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.dm-editor .ProseMirror div[data-type=details] {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+  border: var(--dm-details-border);
+  border-radius: 0.375rem;
+  margin: 0.75em 0;
+}
+.dm-editor .ProseMirror div[data-type=details] > div {
+  display: contents;
+}
+.dm-editor .ProseMirror div[data-type=details] > button[type=button] {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  align-self: center;
+  margin-right: 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--dm-muted);
+  border-radius: 50%;
+}
+.dm-editor .ProseMirror div[data-type=details] > button[type=button]::before {
+  content: "";
+  display: block;
+  width: 0.4em;
+  height: 0.4em;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform 0.15s ease;
+}
+.dm-editor .ProseMirror div[data-type=details] > button[type=button]:hover {
+  color: var(--dm-text);
+  background: var(--dm-hover);
+}
+.dm-editor .ProseMirror div[data-type=details] > button[type=button]:focus {
+  outline: none;
+}
+.dm-editor .ProseMirror div[data-type=details]::before {
+  content: "";
+  grid-column: 1/-1;
+  grid-row: 1;
+  background: var(--dm-details-bg);
+  border-radius: 0.375rem;
+}
+.dm-editor .ProseMirror div[data-type=details].is-open::before {
+  border-radius: 0.375rem 0.375rem 0 0;
+}
+.dm-editor .ProseMirror div[data-type=details] summary {
+  grid-column: 1;
+  grid-row: 1;
+  display: block;
+  padding: 0.5em 0.5em 0.5em 0.75em;
+  font-weight: var(--dm-details-summary-font-weight);
+  min-height: 0;
+}
+.dm-editor .ProseMirror div[data-type=details] summary::-webkit-details-marker {
+  display: none;
+}
+.dm-editor .ProseMirror div[data-type=details] summary {
+  list-style: none;
+}
+.dm-editor .ProseMirror div[data-type=details] div[data-details-content] {
+  grid-column: 1/-1;
+  grid-row: 2;
+  padding: 0.5em 0.75em;
+  border-top: var(--dm-details-border);
+}
+.dm-editor .ProseMirror div[data-type=details].ProseMirror-selectednode {
+  outline: none;
+}
+.dm-editor .ProseMirror div[data-type=details].is-open > button[type=button]::before {
+  transform: rotate(45deg);
+}
+
+.dm-editor .ProseMirror .invisible-char {
+  color: var(--dm-invisible-char-color, var(--dm-muted, #999));
+  pointer-events: none;
+  user-select: none;
+}
+.dm-editor .ProseMirror [data-char=space] {
+  position: relative;
+}
+.dm-editor .ProseMirror [data-char=space]::after {
+  content: "·";
+  position: absolute;
+  inset: 0;
+  text-align: center;
+  color: var(--dm-invisible-char-color, var(--dm-muted, #999));
+  pointer-events: none;
+}
+.dm-editor .ProseMirror [data-char=nbsp] {
+  position: relative;
+}
+.dm-editor .ProseMirror [data-char=nbsp]::after {
+  content: "°";
+  position: absolute;
+  inset: 0;
+  text-align: center;
+  color: var(--dm-invisible-char-color, var(--dm-muted, #999));
+  pointer-events: none;
+}
+
+.dm-emoji-picker {
+  position: absolute;
+  z-index: 100;
+  width: 20rem;
+  max-height: 22rem;
+  display: flex;
+  flex-direction: column;
+  background: var(--dm-surface, #f8f9fa);
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  animation: dm-fade-in 0.2s ease;
+}
+
+.dm-emoji-picker-search {
+  flex-shrink: 0;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--dm-border-color, #e0e0e0);
+}
+.dm-emoji-picker-search input {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 0.25rem;
+  background: var(--dm-bg, #ffffff);
+  color: var(--dm-text, #1a1a1a);
+  font-size: 0.8125rem;
+  outline: none;
+  box-sizing: border-box;
+}
+.dm-emoji-picker-search input:focus {
+  border-color: var(--dm-accent, #2563eb);
+}
+.dm-emoji-picker-search input::placeholder {
+  color: var(--dm-muted, #999999);
+}
+
+.dm-emoji-picker-tabs {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0.375rem 0.5rem;
+  gap: 0.1rem;
+  border-bottom: 1px solid var(--dm-border-color, #e0e0e0);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.dm-emoji-picker-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.dm-emoji-picker-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  opacity: 0.5;
+  transition: opacity 0.15s, background-color 0.15s;
+}
+.dm-emoji-picker-tab:hover {
+  opacity: 1;
+  background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+}
+.dm-emoji-picker-tab--active {
+  opacity: 1;
+  background: var(--dm-active, rgba(0, 0, 0, 0.12));
+}
+
+.dm-emoji-picker-grid {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.25rem 0.5rem 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 0.125rem;
+  align-content: start;
+}
+
+.dm-emoji-picker-category-label {
+  grid-column: 1/-1;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--dm-text, #1a1a1a);
+  opacity: 0.6;
+  padding: 0.375rem 0 0.125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.dm-emoji-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: background-color 0.1s, transform 0.1s;
+}
+.dm-emoji-swatch:hover {
+  background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+  transform: scale(1.15);
+}
+
+.dm-emoji-picker-empty {
+  grid-column: 1/-1;
+  padding: 1rem;
+  text-align: center;
+  color: var(--dm-text, #1a1a1a);
+  opacity: 0.5;
+  font-size: 0.8125rem;
+}
+
+.dm-emoji-suggestion {
+  position: absolute;
+  z-index: 100;
+  min-width: 12rem;
+  max-width: 18rem;
+  padding: 0.25rem;
+  background: var(--dm-surface, #f8f9fa);
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  animation: dm-fade-in 0.2s ease;
+}
+
+.dm-emoji-suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--dm-text, #1a1a1a);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  text-align: left;
+  transition: background-color 0.1s;
+}
+.dm-emoji-suggestion-item:hover, .dm-emoji-suggestion-item--selected {
+  background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+}
+
+.dm-emoji-suggestion-emoji {
+  font-size: 1.125rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.dm-emoji-suggestion-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dm-emoji-suggestion-empty {
+  padding: 0.5rem;
+  text-align: center;
+  color: var(--dm-text, #1a1a1a);
+  opacity: 0.5;
+  font-size: 0.8125rem;
+}
+
+.dm-editor .ProseMirror span.emoji {
+  cursor: default;
+  font-style: normal;
+  padding: 0 0.05em;
+}
+.dm-editor .ProseMirror span.emoji.ProseMirror-selectednode {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  border-radius: 0.15em;
+}
+
+.dm-editor .dm-table-container {
+  position: relative;
+}
+
+.dm-table-col-handle,
+.dm-table-row-handle {
+  position: absolute;
+  z-index: 10;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 4px;
+  background: var(--dm-bg, #ffffff);
+  color: var(--dm-muted, #999999);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
+}
+.dm-table-col-handle:hover,
+.dm-table-row-handle:hover {
+  background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+  color: var(--dm-text, #1a1a1a);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+.dm-table-col-handle svg,
+.dm-table-row-handle svg {
+  display: block;
+}
+
+.dm-table-col-handle {
+  width: 24px;
+  height: 14px;
+}
+
+.dm-table-row-handle {
+  width: 14px;
+  height: 24px;
+}
+
+.dm-table-cell-handle {
+  position: absolute;
+  z-index: 10;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--dm-accent, #2563eb);
+  border-radius: 50%;
+  background: var(--dm-bg, #ffffff);
+  color: var(--dm-accent, #2563eb);
+  cursor: pointer;
+  padding: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.dm-table-cell-handle:hover {
+  background: var(--dm-accent, #2563eb);
+  color: #fff;
+  border-color: var(--dm-accent, #2563eb);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--dm-accent, #2563eb) 30%, transparent);
+}
+.dm-table-cell-handle svg {
+  display: block;
+  width: 8px;
+  height: 8px;
+}
+
+.dm-table-cell-toolbar {
+  position: absolute;
+  z-index: 10;
+  display: none;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 6px;
+  background: var(--dm-bg, #ffffff);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  animation: dm-fade-in 0.12s ease;
+}
+
+.dm-table-cell-toolbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 4px 5px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--dm-text, #1a1a1a);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+.dm-table-cell-toolbar-btn:hover, .dm-table-cell-toolbar-btn.dm-table-cell-toolbar-btn--open {
+  background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+}
+.dm-table-cell-toolbar-btn--active {
+  color: var(--dm-accent, #2563eb);
+  background: var(--dm-accent-surface, rgba(37, 99, 235, 0.1));
+}
+.dm-table-cell-toolbar-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+  pointer-events: none;
+}
+.dm-table-cell-toolbar-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.dm-table-cell-toolbar-chevron {
+  display: flex;
+  align-items: center;
+}
+
+.dm-table-cell-toolbar-sep {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: var(--dm-border-color, #e0e0e0);
+}
+
+.dm-table-cell-align-dropdown {
+  min-width: auto;
+  width: max-content;
+  padding: 0.25rem;
+}
+.dm-table-cell-align-dropdown .dm-table-align-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.3rem 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--dm-text, #1a1a1a);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  transition: background-color 0.15s, color 0.15s;
+}
+.dm-table-cell-align-dropdown .dm-table-align-item:hover {
+  background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+}
+.dm-table-cell-align-dropdown .dm-table-align-item--active {
+  color: var(--dm-accent, #2563eb);
+  background: var(--dm-accent-surface, rgba(37, 99, 235, 0.1));
+}
+.dm-table-cell-align-dropdown .dm-table-align-item-icon {
+  display: flex;
+  align-items: center;
+}
+.dm-table-cell-align-dropdown .dm-table-align-item-icon svg {
+  display: block;
+}
+
+.dm-editor .ProseMirror table td[data-text-align=center], .dm-editor .ProseMirror table th[data-text-align=center] {
+  text-align: center;
+}
+.dm-editor .ProseMirror table td[data-text-align=right], .dm-editor .ProseMirror table th[data-text-align=right] {
+  text-align: right;
+}
+.dm-editor .ProseMirror table td[data-vertical-align=middle], .dm-editor .ProseMirror table th[data-vertical-align=middle] {
+  vertical-align: middle;
+}
+.dm-editor .ProseMirror table td[data-vertical-align=bottom], .dm-editor .ProseMirror table th[data-vertical-align=bottom] {
+  vertical-align: bottom;
+}
+
+.dm-editor td.dm-cell-focused,
+.dm-editor th.dm-cell-focused {
+  outline: 1px solid var(--dm-accent, #2563eb);
+  outline-offset: -1px;
+}
+
+.dm-table-controls-dropdown {
+  position: absolute;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 10rem;
+  padding: 0.25rem;
+  background: var(--dm-bg, #fff);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+  animation: dm-fade-in 0.2s ease;
+}
+.dm-table-controls-dropdown > button {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: var(--dm-button-border-radius);
+  background: transparent;
+  color: var(--dm-button-color);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  text-align: left;
+  white-space: nowrap;
+  transition: background-color 0.15s;
+}
+.dm-table-controls-dropdown > button:hover {
+  background: var(--dm-button-hover-bg);
+}
+
+.dm-table-controls-dropdown-icon {
+  display: flex;
+  align-items: center;
+  color: var(--dm-icon, #666);
+}
+.dm-table-controls-dropdown-icon svg {
+  display: block;
+}
+
+.dm-table-cell-dropdown {
+  min-width: auto;
+  width: max-content;
+  padding: 0;
+  border-radius: 0.75rem;
+}
+.dm-table-cell-dropdown .dm-color-palette {
+  padding: 0.5rem;
+}
+
+.dm-table-cell-dropdown-separator {
+  height: 1px;
+  background: var(--dm-border-color, #e0e0e0);
+  margin: 0.25rem 0;
+}
+
+.dm-theme-light,
+.dm-theme-light .dm-editor,
+.dm-theme-light .dm-toolbar {
+  --dm-bg: #ffffff;
+  --dm-text: #1a1a1a;
+  --dm-muted: #999999;
+  --dm-surface: #f8f9fa;
+  --dm-border-color: #e0e0e0;
+  --dm-hover: rgba(0, 0, 0, 0.06);
+  --dm-active: rgba(0, 0, 0, 0.12);
+  --dm-accent: #2563eb;
+  --dm-accent-hover: #1d4ed8;
+  --dm-accent-surface: rgba(37, 99, 235, 0.1);
+  --dm-focus-color: rgba(66, 133, 244, 0.3);
+  --dm-selection: rgba(66, 133, 244, 0.2);
+  --dm-code-surface: #f5f5f5;
+  --dm-code-color: #d63384;
+  --dm-highlight-bg: #fff3cd;
+  --dm-syntax-keyword: #d73a49;
+  --dm-syntax-entity: #6f42c1;
+  --dm-syntax-constant: #005cc5;
+  --dm-syntax-string: #032f62;
+  --dm-syntax-variable: #e36209;
+  --dm-syntax-comment: #6a737d;
+  --dm-syntax-tag: #22863a;
+  --dm-syntax-addition: #22863a;
+  --dm-syntax-addition-bg: #f0fff4;
+  --dm-syntax-deletion: #b31d28;
+  --dm-syntax-deletion-bg: #ffeef0;
+}
+
+.dm-theme-dark,
+.dm-theme-dark .dm-editor,
+.dm-theme-dark .dm-toolbar,
+.dm-theme-dark .dm-bubble-menu,
+.dm-theme-dark .dm-emoji-picker,
+.dm-theme-dark .dm-emoji-suggestion {
+  --dm-color-scheme: dark;
+  --dm-bg: #1e1e1e;
+  --dm-text: #e0e0e0;
+  --dm-muted: #777777;
+  --dm-surface: #2a2a2a;
+  --dm-border-color: #3a3a3a;
+  --dm-hover: rgba(255, 255, 255, 0.08);
+  --dm-active: rgba(255, 255, 255, 0.15);
+  --dm-accent: #60a5fa;
+  --dm-accent-hover: #93c5fd;
+  --dm-accent-surface: rgba(96, 165, 250, 0.15);
+  --dm-focus-color: rgba(96, 165, 250, 0.3);
+  --dm-selection: rgba(96, 165, 250, 0.25);
+  --dm-code-surface: #2d2d2d;
+  --dm-code-color: inherit;
+  --dm-highlight-bg: rgba(255, 243, 205, 0.2);
+  --dm-blockquote-border: 3px solid #555555;
+  --dm-blockquote-color: #a0a0a0;
+  --dm-syntax-keyword: #ff7b72;
+  --dm-syntax-entity: #d2a8ff;
+  --dm-syntax-constant: #79c0ff;
+  --dm-syntax-string: #a5d6ff;
+  --dm-syntax-variable: #ffa657;
+  --dm-syntax-comment: #8b949e;
+  --dm-syntax-tag: #7ee787;
+  --dm-syntax-addition: #aff5b4;
+  --dm-syntax-addition-bg: #033a16;
+  --dm-syntax-deletion: #ffdcd7;
+  --dm-syntax-deletion-bg: #67060c;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto,
+  .dm-theme-auto .dm-editor,
+  .dm-theme-auto .dm-toolbar,
+  .dm-theme-auto .dm-bubble-menu,
+  .dm-theme-auto .dm-emoji-picker,
+  .dm-theme-auto .dm-emoji-suggestion {
+    --dm-color-scheme: dark;
+    --dm-bg: #1e1e1e;
+    --dm-text: #e0e0e0;
+    --dm-muted: #777777;
+    --dm-surface: #2a2a2a;
+    --dm-border-color: #3a3a3a;
+    --dm-hover: rgba(255, 255, 255, 0.08);
+    --dm-active: rgba(255, 255, 255, 0.15);
+    --dm-accent: #60a5fa;
+    --dm-accent-hover: #93c5fd;
+    --dm-accent-surface: rgba(96, 165, 250, 0.15);
+    --dm-focus-color: rgba(96, 165, 250, 0.3);
+    --dm-selection: rgba(96, 165, 250, 0.25);
+    --dm-code-surface: #2d2d2d;
+    --dm-code-color: inherit;
+    --dm-highlight-bg: rgba(255, 243, 205, 0.2);
+    --dm-blockquote-border: 3px solid #555555;
+    --dm-blockquote-color: #a0a0a0;
+    --dm-syntax-keyword: #ff7b72;
+    --dm-syntax-entity: #d2a8ff;
+    --dm-syntax-constant: #79c0ff;
+    --dm-syntax-string: #a5d6ff;
+    --dm-syntax-variable: #ffa657;
+    --dm-syntax-comment: #8b949e;
+    --dm-syntax-tag: #7ee787;
+    --dm-syntax-addition: #aff5b4;
+    --dm-syntax-addition-bg: #033a16;
+    --dm-syntax-deletion: #ffdcd7;
+    --dm-syntax-deletion-bg: #67060c;
+  }
+}